{"id":3429,"date":"2020-09-30T18:52:31","date_gmt":"2020-09-30T18:52:31","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3429"},"modified":"2020-10-15T21:16:20","modified_gmt":"2020-10-15T21:16:20","slug":"vue-3-for-ionic-developers","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers","title":{"rendered":"Vue 3 for Ionic Developers"},"content":{"rendered":"

The other week, the Vue team released a major update to VueJs, its 3.0.0 release. We (Ionic) have been following Vue for some time now and keeping an eye out for when their v3 would be ready in order to complete Ionic Vue support. As we stand right now, Ionic Vue is going through its beta release<\/a> with a release candidate very close. With everything coming together and Ionic devs getting another framework they could use, I thought it would make sense to give an overview of Vue for those who are curious if it’s the right framework for them. Let’s dive in.<\/p>\n

<\/p>\n

Components All The Way<\/h2>\n

Like React and Angular, Vue is built on the concept of Components. From the root of your app, to the routes that are rendered, everything is a component.<\/p>\n

\"\"

Now this isn’t too far off from what other frameworks do, but with Vue, these components are built as Single File Components<\/a>. These are files with the .vue<\/code> extension, and they are how we create our template, styles, and component logic. Let’s look at a basic component.<\/p>\n

<template>\n  <h1>Hello, {{ name }}<\/h1>\n<\/template>\n\n<script lang="ts">\nimport { defineComponent } from 'vue';\nexport default defineComponent({\n  setup() {\n    const name = "world"\n    return {name}\n  }\n});\n<\/script>\n\n<style scoped>\nh1 {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n}\n<\/style>\n<\/code><\/pre>\n
Let’s break this down.<\/p>\n
Templates<\/h2>\n
For starters, we have this template<\/code> tag at the top of our file. As its name implies, this is the template for our component, which will be what gets rendered in the DOM.<\/p>\n
<template>\n  <h1>Hello, {{ name }}<\/h1>\n<\/template>\n<\/code><\/pre>\n
We have a common pattern of double curly braces ({{ }}<\/code>) to declare that this value will be derived from our component\u2019s logic.<\/p>\n
Scripts<\/h2>\n
Speaking of, let’s look at the next piece, the script<\/code> tag.<\/p>\n
<script lang="ts">\nimport { defineComponent } from 'vue';\nexport default defineComponent({\n  setup() {\n    const name = "world"\n    return {name}\n  }\n});\n<\/script>\n<\/code><\/pre>\n
First off, a script<\/code> tag embedded in our component? What about separation of concerns? With SFCs, the idea is to keep all the necessary pieces of a component together, instead of split across multiple files. This way, our component has everything it needs in one place.<\/p>\n
Next, what’s the deal with the lang<\/code> attribute on the script<\/code> tag? With Vue and its tooling, we can author our components logic in either JavaScript or TypeScript. By default, the lang is set to js<\/code> for JavaScript, but TypeScript can be enabled by setting lang to ts<\/code>. Now, when the tooling for Vue parses our code, it will know to run the script segment through TypeScript first.<\/p>\n
For the logic of our component, we have a default export and this defineComponent<\/code> function. In Vue, a component’s logic is really just an object that gets exported. But since we’re using TypeScript, a regular object doesn’t really provide the correct types for tooling. So by using defineComponent<\/code>, we are essentially returning an object, just with the right type information for TypeScript. Even if you are authoring things in JavaScript, it’s best practice to use defineComponent<\/code> for consistency.<\/p>\n
Now the main piece of our component logic is the setup<\/code> function. This allows us to compose functionality together, bringing in external utilities into our component in a modular fashion. There’s a good section in the Vue docs<\/a> that covers composition and I highly suggest giving it a read.<\/p>\n
Style<\/h2>\n
<style scoped>\nh1 {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n}\n<\/style>\n<\/code><\/pre>\n
The last section of our component is the style<\/code> tag. Like script<\/code>, we can pass different style preprocessors in the lang<\/code> attribute. So if you want to build your components using something like Sass, Less, or any other preprocessor, you can specify that in lang<\/code>. In addition to this, you can also specify how your component\u2019s styles will be scoped. By default, styles are part of the global CSS context, meaning any CSS written in style<\/code>s could conflict with one another. But if you add the scope<\/code> attribute, a component’s style will be limited to that component only.<\/p>\n
Bootstrapping an App<\/h2>\n
With a component create, we can bootstrap an app by targeting an HTML element and rendering the component:<\/p>\n
import { createApp } from 'vue';\nimport App from '.\/App.vue';\n\ncreateApp(App)\n  .mount('#app');\n<\/code><\/pre>\n
createApp<\/code> is a function from Vue that will bootstrap the app for us. This will return an instance of our app, which we can render with mount<\/code>. mount<\/code> just takes an HTML selector for our root. In a typical Vue app structure, this is a div in our index.html<\/code>:<\/p>\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n  ...\n  <\/head>\n  <body>\n\n    <div id="app"><\/div>\n\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
From here, our app is up and running!<\/p>\n
Diving Deeper<\/h2>\n
Vue provides the same functionality that users would expect from a modern JavaScript framework, like routing, state management, and a CLI. But these tools are all optional, and not a hard requirement. So if you wanted to get started, you could roll your own solutions, or install the Vue CLI and add the features you need.<\/p>\n
If you’re interested in learning more about Vue, especially Vue 3, take a look at the new Vue 3 docs<\/a>, which covers not only the basics of Vue’s component syntax, but deep dives into component architecture, external libraries, and overall best practices. We’re thrilled to see Vue 3 launch, and can’t wait to complete Ionic Vue. Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"
The other week, the Vue team released a major update to VueJs, its 3.0.0 release. We (Ionic) have been following Vue for some time now and keeping an eye out for when their v3 would be ready in order to complete Ionic Vue support. As we stand right now, Ionic Vue is going through its […]<\/p>\n","protected":false},"author":5,"featured_media":3405,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,121,124],"tags":[3,147],"class_list":["post-3429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-engineering","category-tutorials","tag-ionic","tag-vue"],"acf":[],"yoast_head":"\nVue 3 for Ionic Developers - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue 3 for Ionic Developers\" \/>\n<meta property=\"og:description\" content=\"The other week, the Vue team released a major update to VueJs, its 3.0.0 release. We (Ionic) have been following Vue for some time now and keeping an eye out for when their v3 would be ready in order to complete Ionic Vue support. As we stand right now, Ionic Vue is going through its […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-30T18:52:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-15T21:16:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Vue 3 for Ionic Developers\",\"datePublished\":\"2020-09-30T18:52:31+00:00\",\"dateModified\":\"2020-10-15T21:16:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\"},\"wordCount\":784,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png\",\"keywords\":[\"Ionic\",\"Vue\"],\"articleSection\":[\"All\",\"Engineering\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\",\"url\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\",\"name\":\"Vue 3 for Ionic Developers - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png\",\"datePublished\":\"2020-09-30T18:52:31+00:00\",\"dateModified\":\"2020-10-15T21:16:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue 3 for Ionic Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue 3 for Ionic Developers - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers","og_locale":"en_US","og_type":"article","og_title":"Vue 3 for Ionic Developers","og_description":"The other week, the Vue team released a major update to VueJs, its 3.0.0 release. We (Ionic) have been following Vue for some time now and keeping an eye out for when their v3 would be ready in order to complete Ionic Vue support. As we stand right now, Ionic Vue is going through its […]","og_url":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers","og_site_name":"Ionic Blog","article_published_time":"2020-09-30T18:52:31+00:00","article_modified_time":"2020-10-15T21:16:20+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","type":"image\/png"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Vue 3 for Ionic Developers","datePublished":"2020-09-30T18:52:31+00:00","dateModified":"2020-10-15T21:16:20+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers"},"wordCount":784,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","keywords":["Ionic","Vue"],"articleSection":["All","Engineering","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers","url":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers","name":"Vue 3 for Ionic Developers - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","datePublished":"2020-09-30T18:52:31+00:00","dateModified":"2020-10-15T21:16:20+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/vue-3-for-ionic-developers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Vue 3 for Ionic Developers"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionic-vue-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3429"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3405"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}