Is it possible to use ionic with nuxt?

Ionic Framework
1

Ionic vue beta is released and i wonder if it’s possible to use it with nuxt as well.
Nothing appears when i search with nuxt and ionic so…
Is there any information for this one?

2

@Feelthewind,
I was wondering about the same question.

More specifically, it seems that Nuxt.js apps need to be served by an http server, however cordova apps by default are loaded from the filesystem (using the file:// protocol). I added the ionic web-view to my cordova app, which serves the app instead of loading it from the filesystem and the Nuxt app I included in my cordova app worked with no issues.

However, because I don’t see other developers use Nuxt in cordova apps along with the ionic web-view, I feel a bit uneasy about building a large app on this architecture.

3

It’s possible, using the SPA mode.

You’ll need to use the router-module to use IonicVueRouter:

import Vue from 'vue';
import { IonicVueRouter } from '@ionic/vue';
import Home from '@/pages/index';

Vue.use(IonicVueRouter);

export function createRouter() {
  return new IonicVueRouter({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: Home,
      },
    ],
  });
}

Then create a plugin to use Ionic:

plugins/ionic.js

import Vue from 'vue';
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

& reference it to the nuxt.config.js:

  plugins: [
    { src: '~/plugins/ionic.js', mode: 'client' },
  ]

It must be client-side only, as Ionic is defining custom elements to the DOM:

32%20am

5

Thank you Gomah, this seems like a promising combination! Would love to see Ionic as one of the built in UI framework options in Nuxt 3 :crossed_fingers: :pray:

6

When creating a project for a Nuxt 3 project via Nuxt CLI, I am asked what is my deployment target:

  • Server (node.js hosting)
  • Static (static/jamstack hosting)

I do not know what to choose in order to work with Ionic. I am a complete noob in frontend framework matters.

Any directions?

7

Choose Static, because you haven’t node.js server on your phone.

1 Like