https://github.com/daggerok/ionic-nuxt-app

Ionic + Nuxt.js setup https://daggerok.github.io/ionic-nuxt-app/
https://github.com/daggerok/ionic-nuxt-app

base-href github ionic nuxt vue

Last synced: 6 days ago
JSON representation

Ionic + Nuxt.js setup https://daggerok.github.io/ionic-nuxt-app/

• Host: GitHub
• URL: https://github.com/daggerok/ionic-nuxt-app
• Owner: daggerok
• Created: 2019-12-08T23:20:33.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-28T12:22:22.000Z (over 3 years ago)
• Last Synced: 2023-04-05T03:19:10.598Z (over 1 year ago)
• Topics: base-href, github, ionic, nuxt, vue
• Language: JavaScript
• Homepage:
• Size: 2.43 MB
• Stars: 43
• Watchers: 4
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ionic-nuxt-app [![Build Status](https://travis-ci.org/daggerok/ionic-nuxt-app.svg?branch=master)](https://travis-ci.org/daggerok/ionic-nuxt-app) [![CI](https://github.com/daggerok/ionic-nuxt-app/workflows/CI/badge.svg)](https://github.com/daggerok/ionic-nuxt-app/actions?query=workflow%3ACI)

Ionic + Nuxt.js setup

## setup

create regular nuxt app:

```bash

npm i -g create-nuxt-app

create-nuxt-app ionic-nuxt-app

cd ionic-nuxt-app/

npm i -E @ionic/core @ionic/vue

# IMPORTANT:

npm i -ED [email protected]

```

add `plugins/ionic.js` file:

```js

import Vue from 'vue';

// import Ionic from '@ionic/vue';

import { defineCustomElements as Ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core

Vue.use(Ionic);

Vue.config.ignoredElements = [

  /^ion-/,

];

```

edit `layoutes/default.vue` file:

```vue

  

    

  

```

edit `pages/index.vue` file:

```vue

  

  

    

      

        Ionic Nuxt App

      

    

    

    

      

        Ololo

        Trololo

        

          
Hololo!

        

      

    

  


  import Logo from '~/components/Logo.vue';

  export default {

    components: {

      Logo,

    },

  };

```

finally, edit `nuxt.config.js` file:

```js

// let's pick  when GitHub pages:

const baseHref = process.env.BASE_HREF || '/';

export default {

  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 path

    base: baseHref,

    mode: 'history',

  },

  // skipped others...

}

```

## build, test and run

```bash

rm -rf node_modules package-lock.json dist ; npm i ; npm audit fix ; npm t

npm start

http :3000

```

## 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](https://nuxtjs.org)

* https://github.com/daggerok/webflux-kotlin-ionic-nuxt-mono-app

* https://github.com/daggerok/typescript-ionic-nuxt-app

* https://github.com/daggerok/spring-boot-nuxt-spa

* https://github.com/daggerok/vue-ionic-example

* https://github.com/daggerok/nuxt-examples

* https://github.com/daggerok/vue-examples

* https://alligator.io/vuejs/vue-ionic/