Can I add Ionic 5 to a vite/vue project? (ES Modules)

Ionic Framework Ionic Vue
1

I’m tinkering, trying to add Ionic to a basic vite-based Vue app.

npx create-vite-app vv-ionic
cd vv-ionic
yarn
yarn dev

Vite replaces webpack and uses JS with ES Modules.

I’ve looked through the Vue with JS section of the docs, and can’t figure out how to just add @ionic/vue to the Vite Vue project. Without typescript, do I have to import all the main.js imports in the index.html?

It is looking for an ES module /@modules/@ionic/vue/dist/index.esm.js (main.js:11), which Ionic doesn’t have.

Here’s the repo: https://github.com/dolthead/vv-ionic

I’ve also tried starting from the Vite-TS starter at https://github.com/ktsn/vite-typescript-starter, but am getting the same error trying to add and load Ionic.

3 Likes
2

doesn’t work… has to do with the way vite is loading packages. You can try and open an issue.

2 Likes
3

I’d love to see this working some day as well! Hopefully it doesn’t take too long, I’m guessing the libraries that adopt it first will get a good deal of extra attention after 1.0, especially from the Vue community.

4

Yes, I’d like to use vite or snowpack too !

5

I would also like to see this, please add a support. :pray:

1 Like