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

Answer 1

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

Answer 2

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!