How integrate Quasar framework and Vuetify?

Question

How to install vuetify in a project generated with quasar cli?

In a normal project with vue cli only need the command

vue add vuetify

but in quasar cli I run the command

npm install vuetify

and generate new boot file, but i have an error in sass or sass-loader

Katharinekatharsis

Are you sure you want to use both in one project? I'm not sure, but it seems like Quasar provides superset of features in comparison w/ Vuetify. Q. looks like Vuetify + CLI tooling to me. – Gravel

Were you able to isolate the styles sheets? – Wartime

Answer 1

He did it, but he's a bit of a cheater. I needed a very fast migration to export a mobile app. Steps:

1. Execute quasar dev at least once.

2. Enter node_modules\@quasar\app\lib\generator.js and change

   const paths = [
     'app.js',
     'client-entry.js',
     'client-prefetch.js',
     'import-quasar.js'
   ]
   

   by

     const paths = [
     'client-entry.js',
     'client-prefetch.js',
     'import-quasar.js'
   ]
   

3. Install vuetify npm install vuetify

4. Enter .quasar\app.js and put your vuetify configuration, in my case:

import es from "vuetify/src/locale/es";
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
const opts = {
  theme: {
    options: {
      customProperties: true
    },
    themes: {
      light: {
        primary: "#F79DC2",
        secondary: "#02283c",
        accent: "#FFAB00",
        error: "#a13835",
        disabled: "#a13835",
        background: "black"
      }
    }
  },
  lang: {
    locales: { es },
    current: "es"
  }
};

Vue.use(Vuetify)

Below you have to add

const vuetify = new Vuetify (opts)
  const app = {
    router,
    store,
    vuetify, <--------
    render: h => h (App)
  }

5. Enter App.vue and change the main div to

<v-app id = "q-app">
   .
   .
</v-app>

Working! I hope it works!

Tenderize

Hi @Vallemar, thanks for the description! How much increase in the delivered minified js did you experience after treeshaking? – Herein

Answer 2

It, not a good idea to use two frontend UI frameworks like(bootstrap,vuetify, quasar ...) in one project, it's just like using honey and industrial sugar to make one tea.

You should always consider the bundle size of your work.

what if vuetify comes with a cli, would you have added vuetify to quasar or quasar to vuetify

Wiggler

What if we only import the components that we need from each framework? – Calcariferous

Answer 3

how to connect/use Vuetify 3 in Quasar 2

Connecting Vuetify

1. npm install vuetify
2. create src/ui/index.js

import { createVuetify } from 'vuetify'
import 'vuetify/styles'

export const vuetifyInstance = createVuetify({/* ... */})

3. create src/boot/registerVuetify.js

import { vuetifyInstance as vuetify } from 'src/ui'
export default ({ app }) => {
    app.use(vuetify)
}

add to quasar.config.js

module.exports = configure(function (/*ctx*/) {
    return {
    //...
        boot: [
            //...
            '~src/boot/registerVuetify'
        ],
    //...
    }
})

4. exclude quasar UI framework (vite) => add to quasar.config.js

module.exports = configure(function( /*ctx*/ ) {
    return {
        //...
        build: {
            //...
            extendViteConf(viteConf) {
                viteConf.build.rollupOptions = {
                    output: {
                        // exclude quasar css framework (this does not completely exclude the framework from the final build)
                        manualChunks(path) {
                            if (/node_modules.*quasar/.test(path)) {
                                return null
                            }
                        },
                    },
                },
            },
            //...
            alias: {
                'quasar/dist/quasar.css': path.join(__dirname, './src/assets/sass/_your_styles.sass'),
            },
        },
        //...
        framework: {
             //...
             cssAddon: false,
             //...
        },
    }
})

Analog