vue-ionic-example

How to start new Vue Ionic project

Project setup

npm i -g @vue/cli
vue create vue-ionic-example
cd vue-ionic-example
vue add router
npm i -E @ionic/core @ionic/vue

edit src/main.js file:

import'@ionic/core/css/ionic.bundle.css';// import Ionic from '@ionic/vue';import{defineCustomElementsasIonic}from"@ionic/core/loader";// add a direct link to @ionic/coreVue.use(Ionic);Vue.config.ignoredElements=[/^ion-/];

finally use ionic in your root Aoo.vue component:

<template>
<divclass="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>My App</ion-title>
</ion-toolbar>
</ion-header>
<ion-contentclass="ion-padding">
<div>
<router-linkto="/">Home</router-link> |
<router-linkto="/about">About</router-link>
</div>
<router-view/>
</ion-content>
</div>
</template>
<script>exportdefault { name:'app', };</script>

npm scripts

Compiles and hot-reloads for development

npm start

Compiles and minifies for production

npm run build

Run your unit tests

npm t

other repositories

• https://github.com/daggerok/typescript-ionic-nuxt-app
• https://github.com/daggerok/webflux-kotlin-nuxt-app
• https://github.com/daggerok/spring-boot-nuxt-spa
• https://github.com/daggerok/ionic-nuxt-app
• https://github.com/daggerok/nuxt-examples
• https://github.com/daggerok/vue-examples

resources

• https://forum.ionicframework.com/t/is-it-possible-to-use-ionic-with-nuxt/163202/3
• https://ionicframework.com/docs/installation/cdn
• Nuxt.js docs
• ionic-team/ionic-framework#18640 (comment)
• Configuration Reference