Announcing the Ionic Vue Beta
2020-09-09 Update: We’ve released a (new) new beta of Ionic Vue based on Vue 3 (check it out!). The following blog post is based on the old Vue 2 version.
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
! So let’s dive right into that bit.
What is Ionic?
If you’re already using Vue, you might be wondering, what is Ionic and why should I care?
Well, let’s take a step back and just say, “Hello, we’re Ionic!” We’re about 5 million apps (and users) strong, with companies like Nationwide, Marketwatch, and Sworkit using our code.
We’re 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).
And, because the Ionic Framework is focused on the Component/UI layer, you can still keep your framework’s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they’re 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’re excited to share the details about @ionic/vue
.
Getting Started
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.
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
Currently, we have a dependency on vue-router, so during the prompt selection in vue create
, be sure to select vue-router, or run:
vue add router
From here, we can install @ionic/vue
and add it to our project
npm install @ionic/vue
Once the install is finished we have access to the Ionic
plugin and can add it to our main.js.
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
From here, we now have access to all of Ionic’s components.
<template>
<div class="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>Hello World</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png">
</ion-content>
</div>
</template>
<script>
export default {
name: "home",
};
</script>
And that’s it!
Building on Vue Router
Like the Angular and React versions of Ionic, we chose to use the official router that’s provided with Vue, vue-router
. In order to handle Ionic’s animations though, we’ve extended the Router’s API and have created an ion-vue-router
component based on the default router-view. Working off our basic starter project, we can modify App.vue
and use ion-vue-router
and update router.js
to use the IonicVueRouter
class.
src/router.js
import Vue from 'vue';
import Home from './views/Home.vue';
import { IonicVueRouter } from '@ionic/vue';
Vue.use(IonicVueRouter);
export default new IonicVueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () =>
import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
});
What is important to note is that instead of creating a new Router
instance from vue-router
, we use IonicVueRouter
. Since this is built off the Router
API, we’re able to reuse all of the features that you would expect, like Lazy Loading or navigation guards.
In App.vue
, we simply use ion-vue-router
the same way we would use the default router-view
.
src/App.vue
<template>
<div id="app">
<ion-app>
<ion-vue-router />
</ion-app>
</div>
</template>
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!
Doing Things the Vue Way
ionic/vue
includes support for almost every Ionic component we have. So all your HTML will still feel familiar, but will use Vue’s template syntax.
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
:refreshingSpinner="dynamicIcon"
:refreshingText="refreshMessage"
>
</ion-refresher-content>
</ion-refresher>
</ion-content>
Ionic’s virtual scroll component is currently not included in the beta release.
Overlay components, like Modals, are created dynamically using the $ionic
object in Vue.
import Modal from "@/components/Modal.vue";
export default {
name: "home",
methods: {
showModal: async function() {
const modal = await this.$ionic.modalController.create({
component: Modal,
componentProps: {
propsData: {
userData: Math.round(Math.random() * 100)
}
}
});
await modal.present();
}
}
};
The $ionic
object provides controllers for Modals, Alerts, and the rest of the overlay components.
What’s Next?
With beta, ionic/vue
is fairly stable, but does have room for improvements. Some areas we’re looking for feedback are:
- Router Integration
- Tabs ergonomics
- Performance review
Reach out to us on the forum, slack, or Github if you’re using Ionic Vue! Cheers 🍻