Ionic Vue & Vuetify / Switching Ionic Angular to Ionic Vue

Ionic Framework Ionic Vue
#1

Hey folks,

is it possible to use Ionic Vue and also including Vuetity? Vuetity has really a mass of impressive components, which are so far not available to Ionic and it will probably take a while if at all.

I used so far Ionic Angular, but I’m thinking to switch to Vue, since it’s getting more and more popular. And another plus is probably the size for a production ready application.

Does anyone of you switched from Angular to Vue yet?

Thanks in advance,
Oliver

1 Like
#2

Hey there,

Are there any components in particular you are hoping to see? Work is currently underway to add new desktop-focused components to Ionic Framework including accordion, breadcrumbs, etc.

#3

Actually a bunch of components. I or anyone else could achieve this by coding custom components, but out of the box would be great. I saw, that some of those are already on you guys project deck, e.g. expansion panels, steppers, etc. – but there are also some useful component like data tables, calendar, ratings, timelines, sparklines, etc.

But Ionic Vue in combination with Vuetity would work, right? Or am I completely wrong?

2 Likes
#4

Yes, Ionic Vue in combination with Vuetify should work fine.

#5

Thanks @ldebeasi. I will try this - sounds to me as a perfect combination. If I would have to code an app and a web based administration area – would you do both with it, or just the app. The admin area is going to be a bit more complex.

Thanks in advance,
Oliver

#6

@odorakel
Hi, I’m quite new to ionic and since I have to deal with a lot of data, a data table grid component is really wanted.
Using the vuetify table grid sounds good, but how do you implement vuetify? Just from a CDN via main.js or do you load it as a plugin?

Best,
Michael

#7

don’t think vue3 is supported yet in Vuetify

#8

Thanks.
I just tried because of @idebeasi mentioned that ionic vue and material should be working fine.

#9

Did it work? The Vuetify roadmap — Vuetify

#10

As the roadmap says: no. At least not to me.

#11

Sorry! I mixed up Vuetify and Quasar. Quasar should have (beta) Vue 3 integration: Quasar v2 with Vue 3 is released in beta! · Issue #7836 · quasarframework/quasar · GitHub

Vuetify 3 development is on pause according to this comment: [Feature Request] Vuejs 3 support · Issue #11162 · vuetifyjs/vuetify · GitHub

#12

This is actually bad news :slight_smile: …cause Vuetity has nicer components – but anyway, I could also use Ionic Vue2 and Vuetity, right?

#13

Ionic for Vue 2 is not supported currently. We had a beta release of it, but we wanted to focus on Vue 3 support instead.

1 Like
#14

Looks like Vuetify for Vue 3 just released their first alpha: Release v3.0.0-alpha.0 · vuetifyjs/vuetify · GitHub

#15

i’m use ionic-vue with release alpha of vuetify. works well now

  • npm i vuetify@3.0.0-alpha.5 @mdi/font roboto-fontface
  • on the vue.config.js add this
module.exports = {
  ...
  transpileDependencies: [
    'vuetify'
  ]
};
  • and for the last, add this in main.js
import vuetify from './plugins/vuetify';

const app = createApp(App)
  .use(vuetify)

Now you can use all component vuetify :tada:
https://next.vuetifyjs.com/en/components/buttons/