CODEWITHSUNDEEP
vue.jsvuetify.jsquasar-frameworkquasar
Abner Corona
Abner Corona

Reputation: 61

How integrate Quasar framework and Vuetify?

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

Upvotes: 6

Views: 3823

Answers (3)

Gran Torino
Gran Torino

Reputation: 11

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({/* ... */})
  1. 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'
        ],
    //...
    }
})
  1. 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,
             //...
        },
    }
})

Upvotes: 0

Vallemar
Vallemar

Reputation: 333

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)
  }
  1. Enter App.vue and change the main div to
<v-app id = "q-app">
   .
   .
</v-app>

Working! I hope it works!

Upvotes: 2

emmaJNR
emmaJNR

Reputation: 67

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

Upvotes: 1

Related Questions