Ionic Vue & Vuetify / Switching Ionic Angular to Ionic Vue

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

2 Likes

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.

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

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

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

@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

don’t think vue3 is supported yet in Vuetify

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

Did it work? The Vuetify roadmap — Vuetify

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

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

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

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

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

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/

2 Likes

Hey, quick question. You mentioned that you were able to use ionic-vue with release alpha of vuetify.

I have just started my journey with Ionic Vue. So, my doubt about the usage of those two libraries/frameworks together.

Therefore, ionic-vue and vuetify 3 have their own components for buttons.

Example

Vuetify

<v-btn block>
  Block Button
</v-btn>

IonicVue

<ion-button>
  Go to detail
</ion-button>

Knowing that, there is a way of making them work together?

Thanks for your time and attention.

I am just curious to why you are using two different component frameworks?

It would be the same reason that our friend above. Vuetify has layout nicer components and more features that the team want to use to dashboards, graphs and others.

So, we would like to use it to the layout part and have Ionic to help us to create the mobile apps and use mobile features.

Does it make sense?

Then don’t use ionic, just use capacitor

1 Like

could you please share your plugins/vuetify file ?

i did same as you do but it didn’t work :cold_sweat:

here is my query