{"id":3461,"date":"2020-10-15T17:21:33","date_gmt":"2020-10-15T17:21:33","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3461"},"modified":"2020-10-29T20:23:19","modified_gmt":"2020-10-29T20:23:19","slug":"announcing-ionic-vue","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-vue","title":{"rendered":"Announcing Ionic Vue"},"content":{"rendered":"

Today I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take advantage of all the great new features that recently shipped in Vue 3.<\/p>\n

<\/p>\n

Ionic Vue represents a big milestone in Ionic Framework’s development after the release of our React integration<\/a> earlier in 2020. This launch is the culmination of our \u201cIonic for Everyone<\/a>\u201d push that was kicked off in early 2019 with the release of Ionic Framework v4. As a result, I’d like to share some context as to how we got here and where we are going next.<\/p>\n

Click here<\/a> if you just want to get started building with Ionic Vue, I won’t be offended. \ud83d\ude0a<\/p>\n

A bit about Ionic Framework \ud83d\udc81\u200d\u2640\ufe0f<\/h2>\n

If this is your first time hearing about Ionic, Hello there! \ud83d\udc4b<\/p>\n

Ionic Framework is an open source UI toolkit focused on building high quality mobile apps for native iOS, native Android, and the web! From the ground up, it’s built with HTML, CSS, and JavaScript, so web developers should feel right at home building with our components. Our components allow developers to build native experiences, all while using web technology. Today, Ionic powers > 15% of all apps<\/a>.<\/p>\n

\n
\n

\"an

\n

\"an

A Brief History \ud83d\udcd6<\/h2>\n

You might recall us releasing an Ionic Vue beta back in early 2019. That version was built for Vue 2 and lacked features such as proper v-model<\/code> support. While developing Ionic Vue and Ionic React side by side, we quickly realized they had a lot in common. In fact, we found ourselves implementing similar features and fixing the same bugs multiple times.<\/p>\n

Also around this time, the Vue team was starting to ramp up development on Vue 3, and we decided it made sense for Ionic Framework to support that version instead. We paused Ionic Vue development and shifted focus to Ionic React. With its completion, we found ourselves with all the key learnings we needed to develop Ionic Vue, and we are really happy with the way it turned out\u2026 if we may say so ourselves.<\/p>\n

A Big Milestone \ud83c\udfc6<\/h2>\n

Since its launch in January 2019, we wanted Ionic Framework v4 to be known as the<\/em> app framework for every web developer. To that extent, we lovingly referred to Ionic Framework v4 as “Ionic for Everyone.” This release rebuilt Ionic Framework from the ground up with Web Components. While this change took time, it ultimately allows us to support any framework without having to re-write Ionic Framework.<\/p>\n

Today, we are committed to supporting not just Angular, but also React and Vue. In a sense, the release of Ionic Vue is an indication that our efforts have paid off. Neither the React nor the Vue integrations required any major rewrites of Ionic Framework, and the Ionic API remains remarkably similar across framework integrations.<\/p>\n

The release of Ionic Vue demonstrates that any web developer can build performant, cross platform applications with Ionic Framework using the framework of their choice.<\/p>\n

Getting Started \ud83c\udfc3\u200d\u2642\ufe0f<\/h2>\n

\n Note: The first official version of Ionic Vue is v5.4.0\n<\/p><\/blockquote>\n

Getting started with Ionic Vue is a breeze. First, be sure you have the latest version of the Ionic CLI installed:<\/p>\n

npm install -g @ionic\/cli@latest\n<\/code><\/pre>\n
\n  If you used the Ionic Vue beta, be sure to update your CLI as you likely were using a pre-release version.\n<\/p><\/blockquote>\n
From here, we can use the Ionic CLI to create an Ionic Vue starter application:<\/p>\n
ionic start my-vue-app --type vue\n<\/code><\/pre>\n
The CLI will guide you through the setup process by first asking a few questions. Once the application has been installed, you can start the development server by running:<\/p>\n
ionic serve\n<\/code><\/pre>\n
Under the hood, the ionic serve<\/code> command uses the Vue CLI to compile your app, start a dev server, and open your app in a new browser window.<\/p>\n
From here, we have access to all of Ionic Framework’s components:<\/p>\n
<template>\n  <ion-page>\n    <ion-header :translucent="true">\n      <ion-toolbar>\n        <ion-title>Hello Vue<\/ion-title>\n      <\/ion-toolbar>\n    <\/ion-header>\n\n    <ion-content :fullscreen="true">\n      <ion-header collapse="condense">\n        <ion-toolbar>\n          <ion-title size="large">Hello Vue<\/ion-title>\n        <\/ion-toolbar>\n      <\/ion-header>\n    <\/ion-content>\n  <\/ion-page>\n<\/template>\n\n<script>\n  import { defineComponent } from 'vue';\n  import {\n    IonContent,\n    IonHeader,\n    IonPage,\n    IonTitle,\n    IonToolbar,\n  } from '@ionic\/vue';\n  export default defineComponent({\n    name: 'HomePage',\n    components: {\n      IonContent,\n      IonHeader,\n      IonPage,\n      IonTitle,\n      IonToolbar,\n    },\n  });\n<\/script>\n<\/code><\/pre>\n
To use the components, you need to import them from the @ionic\/vue<\/code> package and provide them to your Vue component.<\/p>\n
Building upon the Vue Router \ud83e\udded<\/h3>\n
Like with the Angular and React versions of Ionic Framework, we chose to use the official router that is provided with Vue, vue-router<\/code>. To handle Ionic Framework\u2019s animations, we have extended the Router\u2019s API through the ion-router-outlet<\/code> component. This component is used in place of the typical router-view<\/code> component that is used in Vue applications.<\/p>\n
Using this modified router is mostly the same as the regular vue-router<\/code> except with a few different imports. Lazy loading works out of the box too!<\/p>\n
import { createRouter, createWebHistory } from '@ionic\/vue-router';\nimport Home from '@\/views\/Home.vue'\n\nconst router = createRouter({\n  history: createWebHistory(process.env.BASE_URL),\n  routes: [\n    {\n      path: '\/',\n      redirect: '\/home'\n    },\n    {\n      path: '\/home',\n      name: 'Home',\n      component: Home\n    },\n    {\n      path: '\/lazy',\n      component: () => import('@\/views\/Lazy.vue')\n    }\n  ]\n})\n<\/code><\/pre>\n
Rather than import createRouter<\/code> and createWebHistory<\/code> from vue-router<\/code>, you need to import them from @ionic\/vue-router<\/code>. These imports wrap the vue-router<\/code> functions of the same name and provide a few additional details that let Ionic Framework work well within the Vue environment.<\/p>\n
While we recommend relying on the tooling that Vue Router provides, we have added support for the router-link<\/code> property on components that allow for it:<\/p>\n
<ion-item router-link="\/child-page">\n  <ion-label>Click Me to Navigate<\/ion-label>\n<\/ion-item>\n<\/code><\/pre>\n
You can also specify the direction using router-direction<\/code> and a custom animation using router-animation<\/code>.<\/p>\n
For transitions and lifecycle events to work properly, each Ionic page must be wrapped in an ion-page<\/code> component:<\/p>\n
<template>\n  <ion-page> ... <\/ion-page>\n<\/template>\n\n<script>\n  import { defineComponent } from 'vue';\n  import { IonPage } from '@ionic\/vue';\n  export default defineComponent({\n    name: 'HomePage',\n    components: { IonPage },\n  });\n<\/script>\n<\/code><\/pre>\n
Lifecycle events can be accessed by providing the appropriate event as a method:<\/p>\n
export default defineComponent({\n  name: 'HomePage',\n  components: {\n    IonPage\n  },\n  methods: {\n    ionViewDidEnter: () => {\n      ...\n    },\n    ionViewDidLeave: () => {\n      ...\n    },\n    ionViewWillEnter: () => {\n      ...\n    },\n    ionViewWillLeave: () => {\n      ...\n    }\n  }\n});\n<\/code><\/pre>\n
Doing Things the Vue Way \ud83d\udee0<\/h3>\n
@ionic\/vue<\/code> includes support for every Ionic Framework component except for virtual scroll. We are embracing the community-driven solutions for virtual scroll in Vue applications and will be providing more information on how to get started with these solutions soon! Using components in Ionic Vue will still feel familiar, but will use Vue\u2019s template syntax:<\/p>\n
<template>\n  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"><\/ion-input>\n  Value: { inputValueRef }\n<\/template>\n\n<script>\n  import { defineComponent, ref } from 'vue';\n  import { IonInput } from '@ionic\/vue';\n  export default defineComponent({\n    name: 'MyComponent',\n    components: { IonInput },\n    methods: {\n      onChange: (ev: CustomEvent) => {\n        ...\n      }\n    },\n    setup() {\n      const inputValueRef = ref('');\n      return { inputValueRef };\n    }\n  });\n<\/script>\n<\/code><\/pre>\n
Overlay components, such as ion-modal<\/code>, can be created dynamically by importing the appropriate controller from @ionic\/vue<\/code>:<\/p>\n
<template>\n  <ion-page>\n    <ion-content>\n      <ion-button @click="openModal()">Open Modal<\/ion-button>\n    <\/ion-content>\n  <\/ion-page>\n<\/template>\n<script>\n  import { defineComponent } from 'vue';\n  import { IonButton, IonContent, IonPage, modalController } from '@ionic\/vue';\n  import ModalExample from '@\/components\/Modal.vue';\n  export default defineComponent({\n    name: 'HomePage',\n    components: { IonButton, IonContent, IonPage },\n    setup() {\n      const openModal = async () => {\n        const modal = await modalController.create({\n          component: ModalExample,\n        });\n        await modal.present();\n      };\n\n      return { openModal };\n    },\n  });\n<\/script>\n<\/code><\/pre>\n
Overlay components can also be used directly in your component’s template:<\/p>\n
<template>\n  <ion-page>\n    <ion-content>\n      <ion-button @click="setModal(true)">Open Modal<\/ion-button>\n      <ion-modal :is-open="isOpen" @onDidDismiss="setModal(false)">\n        <ModalExample><\/ModalExample>\n      <\/ion-modal>\n    <\/ion-content>\n  <\/ion-page>\n<\/template>\n<script>\n  import { defineComponent, ref } from 'vue';\n  import { IonButton, IonContent, IonModal, IonPage } from '@ionic\/vue';\n  import ModalExample from '@\/components\/Modal.vue';\n  export default defineComponent({\n    name: 'HomePage',\n    components: { ModalExample, IonButton, IonContent, IonModal, IonPage },\n    setup() {\n      const isOpen = ref(false);\n      const setModal = (state: boolean) => (isOpen.value = state);\n\n      return { isOpen, setModal };\n    },\n  });\n<\/script>\n<\/code><\/pre>\n
Building your way with either TypeScript or JavaScript \u270c\ufe0f<\/h3>\n
We love TypeScript at Ionic, and have believed for quite some time now that it\u2019s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity – in their tooling, languages, and more. In fact, it\u2019s likely what drew you to Vue in the first place. Start simple – then scale up as needed.<\/p>\n
So, if you\u2019d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app (see above), follow these steps:<\/p>\n
    \n
  1. Remove TypeScript dependencies:<\/li>\n<\/ol>\n
    npm uninstall --save typescript @types\/jest @typescript-eslint\/eslint-plugin @typescript-eslint\/parser @vue\/cli-plugin-typescript\n<\/code><\/pre>\n
      \n
    1. Change all .ts<\/code> files to .js<\/code>. In a blank Ionic Vue app, this should only be router\/index.ts<\/code> and main.ts<\/code>.<\/p>\n<\/li>\n
    2. \n
      Remove @vue\/typescript\/recommended<\/code> and @typescript-eslint\/no-explicit-any<\/code>: ‘off’, from .eslintrc.js<\/code>.<\/p>\n<\/li>\n
    3. \n
      Remove Array<RouteRecordRaw><\/code> from router\/index.js<\/code>.<\/p>\n<\/li>\n<\/ol>\n
      Truly native experiences with Vue \ud83d\udcf1<\/h3>\n
      Vue does not natively support mobile app development, but fortunately, you can pair Ionic Vue with Capacitor<\/a>. Using Ionic\u2019s official cross-platform native runtime, you can deploy your apps as progressive web apps and<\/em> iOS\/Android apps – all from the same codebase.<\/p>\n
      Here\u2019s an example using two Capacitor APIs, the Camera<\/a> and Filesystem<\/a>. After opening the camera on the mobile device, the user can take a new photo, then save it to device storage.<\/p>\n
      const takePhoto = async () => {\n  const cameraPhoto = await Camera.getPhoto({\n    resultType: CameraResultType.Uri,\n    source: CameraSource.Camera,\n    quality: 100,\n  });\n\n  const base64Data = convertPhotoToBase64(cameraPhoto);\n\n  const savedFile = await Filesystem.writeFile({\n    path: 'myphoto.jpg',\n    data: base64Data,\n    directory: FilesystemDirectory.Data,\n  });\n};\n<\/code><\/pre>\n
      Notice that there\u2019s no mention of \u201cweb\u201d, \u201ciOS\u201d, or \u201cAndroid\u201d in the code. That\u2019s because Capacitor automatically detects the platform the app is running on, and calls the appropriate native layer code. With Core APIs like these, coupled with full access to native SDKs, Capacitor empowers you to build truly native mobile apps.<\/p>\n
      What’s Next? \ud83d\udee3<\/h2>\n
      For a more in-depth look at Ionic Vue, we recommend checking our Quickstart Guide<\/a>. For a more hands-on experience, take a look at our Build Your First App Guide<\/a>.<\/p>\n
      While the release of Ionic Vue is an important milestone for Ionic Framework, there is always more to do. We plan on releasing complete Server Side Rendering (SSR) support for Ionic Vue in the future. Keep an eye out for a blog post on how you can get started with that!<\/p>\n
      In terms of general Ionic Framework development, we have a lot of exciting things planned, so stay tuned. Also, let us know where you would like to see Ionic Framework go next by tweeting at us @ionicframework<\/a>!<\/p>\n
      Thank You \ud83d\udc99<\/h2>\n
      I want to give a huge<\/strong> thank you to all the community members who helped test the Ionic Vue beta and provide feedback; this project would not have been possible without your support. Special thanks to the folks over at Modus Create<\/a> and specifically Michael Tintiuc<\/a> for helping us get Ionic Vue to where it is today.<\/p>\n
      We are thrilled about Ionic Vue and are excited to welcome all Vue developers to the Ionic community. We are so glad you are here and cannot wait to see what you build!<\/p>\n","protected":false},"excerpt":{"rendered":"
      Today I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take advantage of all the great new features that recently shipped in Vue […]<\/p>\n","protected":false},"author":72,"featured_media":3462,"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,120,121],"tags":[197,147],"class_list":["post-3461","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","category-engineering","tag-ionic-vue","tag-vue"],"acf":[],"yoast_head":"\nAnnouncing Ionic Vue - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.\" \/>\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\/announcing-ionic-vue\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic Vue\" \/>\n<meta property=\"og:description\" content=\"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-15T17:21:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-29T20:23:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-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=\"Liam DeBeasi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LiamDeBeasi\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam DeBeasi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Ionic Vue\",\"datePublished\":\"2020-10-15T17:21:33+00:00\",\"dateModified\":\"2020-10-29T20:23:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\"},\"wordCount\":1402,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png\",\"keywords\":[\"Ionic Vue\",\"Vue\"],\"articleSection\":[\"All\",\"Announcements\",\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\",\"name\":\"Announcing Ionic Vue - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png\",\"datePublished\":\"2020-10-15T17:21:33+00:00\",\"dateModified\":\"2020-10-29T20:23:19+00:00\",\"description\":\"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-vue\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-vue#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic Vue\"}]},{\"@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\/d314e583cf08e7a28c51e8ffc3d621fa\",\"name\":\"Liam DeBeasi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"caption\":\"Liam DeBeasi\"},\"sameAs\":[\"https:\/\/x.com\/LiamDeBeasi\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/liam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic Vue - Ionic Blog","description":"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.","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\/announcing-ionic-vue","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic Vue","og_description":"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-vue","og_site_name":"Ionic Blog","article_published_time":"2020-10-15T17:21:33+00:00","article_modified_time":"2020-10-29T20:23:19+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","type":"image\/png"}],"author":"Liam DeBeasi","twitter_card":"summary_large_image","twitter_creator":"@LiamDeBeasi","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Liam DeBeasi","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Ionic Vue","datePublished":"2020-10-15T17:21:33+00:00","dateModified":"2020-10-29T20:23:19+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue"},"wordCount":1402,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","keywords":["Ionic Vue","Vue"],"articleSection":["All","Announcements","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-vue#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue","url":"https:\/\/ionic.io\/blog\/announcing-ionic-vue","name":"Announcing Ionic Vue - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","datePublished":"2020-10-15T17:21:33+00:00","dateModified":"2020-10-29T20:23:19+00:00","description":"Announcing Ionic Vue - build amazing iOS, Android, and Progressive Web Apps with Vue and standard web technologies.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-vue"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-vue#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic Vue"}]},{"@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\/d314e583cf08e7a28c51e8ffc3d621fa","name":"Liam DeBeasi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","caption":"Liam DeBeasi"},"sameAs":["https:\/\/x.com\/LiamDeBeasi"],"url":"https:\/\/ionic.io\/blog\/author\/liam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/ionic-vue-final-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3461","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\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3461"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3461\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3462"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}