Can't use Ionic with Vue 3 CLI

Ionic Framework Ionic Vue
1

Using this main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import './ionic-variables.css';

const app = createApp(App);
app.use(router);
app.use(Ionic);
app.config.productionTip = false
app.mount('#app');

I always get this error:

2

If you update these lines to the lines below, will it work?

import Ionic from '@ionic/vue';
app.use(Ionic);

import { IonicVue } from '@ionic/vue';
app.use(IonicVue);
3

No, unfortunately it gives me the same error :pensive:

4

we need to see way more than what you provided… can you post a project somewhere?

5

Yes, but it’s basically a new project, created with the vue cli and installed with the dependencies you can see in the main.js

6

After creating a new project with Vue 2.x instead of 3.x and only installing the ionic using the ionic plugin for vue


I get a different error:
7

That vue-cli-plugin-ionic package is outdated and no longer needed. I should also mention that Ionic Vue only supports Vue 3.

You are also initializing Ionic Vue incorrectly. This is the correct way to initialize it:

import { IonicVue } from '@ionic/vue';

...
app.use(IonicVue);

I recommend creating an Ionic Vue app directly from the Ionic CLI as all of the work you are trying to do is done for you in our starter apps. You can follow this guide here to get started: https://ionicframework.com/docs/vue/quickstart

1 Like