Ionic Vue Quickstart
What is Ionic Framework?
First off, if you're new here, welcome! Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
Along with the UI components, Ionic Framework also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
In this guide, we will go over the basics of both Vue and Ionic Framework, including any Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn something new about Ionic Framework. If you are not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
Creating a project with the Ionic CLI
To get started, let's install the latest version of the Ionic CLI.
npm install -g @ionic/cli@latest
From here, the global command ionic
will allow for the creation of a Vue project with Ionic Framework and any other dependencies. To create a new project, run the following command:
ionic start myApp blank --type vue
cd myApp
From here, we run ionic serve
and have our project running in the browser.
Build your way with TypeScript or JavaScript
We love TypeScript at Ionic, and have believed for quite some time now that it’s 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’s likely what drew you to Vue in the first place. Start simple – then scale up as needed.
So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app, follow these steps:
- Remove TypeScript dependencies:
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
-
Change all
.ts
files to.js
. In a blank Ionic Vue app, this should only besrc/router/index.ts
andsrc/main.ts
. If you're using tests, also change the extension of files in thetests
directory. -
In
index.html
, change the imported<script>
file from/src/main.ts
to/src/main.js
. -
Remove
@vue/typescript/recommended
and@typescript-eslint/no-explicit-any: ‘off’,
from.eslintrc.js
. -
Remove
Array<RouteRecordRaw>
and the import ofRouteRecordRaw
fromsrc/router/index.js
. -
Delete the
src/vite-env.d.ts
file if it exists. -
Remove
lang="ts"
from thescript
tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only besrc/App.vue
andsrc/views/HomePage.vue
. -
Delete the
tsconfig.json
file. -
In package.json, change the build script from
"build": "vue-tsc && vite build"
to"build": "vite build"
-
Install terser
npm i -D terser
.
A look at a Vue Component
The base of our app will be in the src
directory, and the main entry point will be our main.ts
file. If we open our project in a code editor and open main.ts
, we should see the following:
import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';
import App from './App.vue';
import router from './router';
const app = createApp(App).use(IonicVue).use(router);
router.isReady().then(() => {
app.mount('#app');
});
So what is going on here? The first four lines are pulling in some dependencies. The createApp
function lets us initialize our Vue application, while IonicVue
is a plugin that allows us to use Ionic Framework in a Vue environment.
The third import is the root component for our app, simply named App
. This is our first Vue component and will be used in the bootstrapping process for our Vue app.
The fourth import gets our routing configuration. We will look at this more in depth later.
If we open App.vue
we should see the following:
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
</script>