{"id":2690,"date":"2019-04-03T14:41:45","date_gmt":"2019-04-03T14:41:45","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2690"},"modified":"2020-10-15T22:34:21","modified_gmt":"2020-10-15T22:34:21","slug":"announcing-the-ionic-vue-beta","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-the-ionic-vue-beta","title":{"rendered":"Announcing the Ionic Vue Beta"},"content":{"rendered":"

2020-09-09 Update: We’ve released a (new) new beta of Ionic Vue based on Vue 3 (check it out!<\/a>). The following blog post is based on the old Vue 2 version.<\/em><\/p>\n

Last week, I had the privilege to speak at the second VueConf USA in sunny Tampa, Florida. On behalf of the whole Ionic team, I was really excited to present a full talk and also get to know more members of the Vue community. And, with all of the excitement around Vue and VueConf, we decided that this was the perfect place to release the beta for @ionic\/vue<\/code>! So let’s dive right into that bit.<\/p>\n

<\/p>\n

What is Ionic?<\/h2>\n

If you\u2019re already using Vue, you might be wondering, what is Ionic and why should I care?<\/p>\n

Well, let\u2019s take a step back and just say, \u201cHello, we\u2019re Ionic!\u201d We\u2019re about 5 million apps (and users) strong, with companies like Nationwide, Marketwatch<\/a>, and Sworkit<\/a> using our code.<\/p>\n

We\u2019re best known for our popular open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform hybrid apps. All of these components are built with HTML, CSS, and JavaScript and can be easily deployed natively to iOS and Android devices, to desktop with Electron, or to the web as a progressive web app (PWA).<\/p>\n

And, because the Ionic Framework is focused on the Component\/UI layer, you can still keep your framework\u2019s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they\u2019re built. In the past, Ionic Framework has been built only supporting Angular. While we still love and support Angular, we’re also opening up to other tools in the front-end ecosystem. This is why we\u2019re excited to share the details about @ionic\/vue<\/code>.<\/p>\n

Getting Started<\/h2>\n

Getting started with Vue and Ionic is fairly straightforward if you’ve used Vue before. We first need to create a basic Vue project with the CLI.<\/p>\n

npm install -g @vue\/cli\nvue create my-vue-app\n\ncd my-vue-app\n<\/code><\/pre>\n
Currently, we have a dependency on vue-router, so during the prompt selection in vue create<\/code>, be sure to select vue-router, or run:<\/p>\n
vue add router\n<\/code><\/pre>\n
From here, we can install @ionic\/vue<\/code> and add it to our project<\/p>\n
npm install @ionic\/vue\n<\/code><\/pre>\n
Once the install is finished we have access to the Ionic<\/code> plugin and can add it to our main.js.<\/p>\n
import Vue from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router';\n\nimport Ionic from '@ionic\/vue';\nimport '@ionic\/core\/css\/ionic.bundle.css';\n\nVue.use(Ionic);\nVue.config.productionTip = false;\n\nnew Vue({\n  router,\n  render: h => h(App)\n}).$mount('#app');\n<\/code><\/pre>\n
From here, we now have access to all of Ionic’s components.<\/p>\n
<template>\n  <div class="ion-page">\n    <ion-header>\n      <ion-toolbar>\n        <ion-title>Hello World<\/ion-title>\n      <\/ion-toolbar>\n    <\/ion-header>\n    <ion-content class="ion-padding">\n      <h1>Welcome To @ionic\/vue<\/h1>\n      <img alt="Vue logo" src="..\/assets\/logo.png">\n    <\/ion-content>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: "home",\n};\n<\/script>\n<\/code><\/pre>\n
\"\"
And that’s it!<\/p>\n
Building on Vue Router<\/h2>\n
Like the Angular and React versions of Ionic, we chose to use the official router that’s provided with Vue, vue-router<\/code>. In order to handle Ionic’s animations though, we’ve extended the Router’s API and have created an ion-vue-router<\/code> component based on the default router-view. Working off our basic starter project, we can modify App.vue<\/code> and use ion-vue-router<\/code> and update router.js<\/code> to use the IonicVueRouter<\/code> class.<\/p>\n
src\/router.js<\/strong><\/p>\n
import Vue from 'vue';\nimport Home from '.\/views\/Home.vue';\nimport { IonicVueRouter } from '@ionic\/vue';\n\nVue.use(IonicVueRouter);\n\nexport default new IonicVueRouter({\n  mode: 'history',\n  base: process.env.BASE_URL,\n  routes: [\n    {\n      path: '\/',\n      name: 'home',\n      component: Home\n    },\n    {\n      path: '\/about',\n      name: 'about',\n      component: () =>\n        import(\/* webpackChunkName: "about" *\/ '.\/views\/About.vue')\n    }\n  ]\n});\n<\/code><\/pre>\n
What is important to note is that instead of creating a new Router<\/code> instance from vue-router<\/code>, we use IonicVueRouter<\/code>. Since this is built off the Router<\/code> API, we’re able to reuse all of the features that you would expect, like Lazy Loading or navigation guards.<\/p>\n
In App.vue<\/code>, we simply use ion-vue-router<\/code> the same way we would use the default router-view<\/code>.<\/p>\n
src\/App.vue<\/strong><\/p>\n
<template>\n  <div id="app">\n    <ion-app>\n      <ion-vue-router \/>\n    <\/ion-app>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
\"\"
The router integration is currently one place where we’d love to get feedback from the community and see where things could be improved, so please do not hesitate to reach out!<\/p>\n
Doing Things the Vue Way<\/h3>\n
ionic\/vue<\/code> includes support for almost every Ionic component we have. So all your HTML will still feel familiar, but will use Vue’s template syntax.<\/p>\n
<ion-content>\n  <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">\n    <ion-refresher-content\n      :refreshingSpinner="dynamicIcon"\n      :refreshingText="refreshMessage"\n    >\n    <\/ion-refresher-content>\n  <\/ion-refresher>\n<\/ion-content>\n<\/code><\/pre>\n
Ionic\u2019s virtual scroll component is currently not included in the beta release.<\/p>\n
Overlay components, like Modals, are created dynamically using the $ionic<\/code> object in Vue.<\/p>\n
import Modal from "@\/components\/Modal.vue";\nexport default {\n  name: "home",\n  methods: {\n    showModal: async function() {\n      const modal = await this.$ionic.modalController.create({\n        component: Modal,\n        componentProps: {\n          propsData: {\n            userData: Math.round(Math.random() * 100)\n          }\n        }\n      });\n      await modal.present();\n    }\n  }\n};\n<\/code><\/pre>\n
\"\"
The $ionic<\/code> object provides controllers for Modals, Alerts, and the rest of the overlay components.<\/p>\n
What’s Next?<\/h3>\n
With beta, ionic\/vue<\/code> is fairly stable, but does have room for improvements. Some areas we’re looking for feedback are:<\/p>\n