ionic-nuxt-app

setup

npm i -g create-nuxt-appcreate-nuxt-app ionic-nuxt-appcd ionic-nuxt-app/npm i -E @ionic/core @ionic/vue# IMPORTANT:npm i -ED jest@24.9.0

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

<template>  <ion-app>    <nuxt />  </ion-app></template>

<template><!-- Add some ionic markup...-->  <ion-page>    <ion-header>      <ion-toolbarclass="toolbar-md-primary">        <ion-title>Ionic Nuxt App</ion-title>      </ion-toolbar>    </ion-header>    <Logo/>    <ion-contentclass="content">      <ion-card>        <ion-card-subtitle>Ololo</ion-card-subtitle>        <ion-card-title>Trololo</ion-card-title>        <ion-card-content>          <h1>Hololo!</h1>        </ion-card-content>      </ion-card>    </ion-content>  </ion-page></template><script>importLogofrom'~/components/Logo.vue';exportdefault {    components: {      Logo,    },  };</script>

// let's pick <base href="/ionic-nuxt-app/" /> when GitHub pages:constbaseHref=process.env.BASE_HREF||'/';exportdefault{head:{link:[// favicon for GitBub pages base href{rel:'icon',type:'image/x-icon',href:baseHref+'favicon.ico'}]},css:[// add required css:'../node_modules/@ionic/core/css/core.css','../node_modules/@ionic/core/css/normalize.css','../node_modules/@ionic/core/css/structure.css','../node_modules/@ionic/core/css/typography.css','../node_modules/@ionic/core/css/ionic.bundle.css',],plugins:[// add created plugin:{src:'~/plugins/ionic.js',mode:'client'},],generate:{routes:['/',],},router:{// router with correct public pathbase:baseHref,mode:'history',},// skipped others...}

build, test and run

rm -rf node_modules package-lock.json dist; npm i; npm audit fix; npm tnpm starthttp :3000

resources