How to load quasar framework Globally

Question

I am new to Quasar framework. Could someone explains how load quasar-components in Globally use. (every where in my application)

My main.js is like:

import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'

require(`quasar/dist/quasar.${__THEME}.css`)

Vue.config.productionTip = false
Vue.use(Quasar) // Install Quasar Framework

if (__THEME === 'mat') {
  require('quasar-extras/roboto-font')
}
import 'quasar-extras/material-icons'
// import 'quasar-extras/ionicons'
// import 'quasar-extras/fontawesome'
// import 'quasar-extras/animate'

Quasar.start(() => {
/* eslint-disable no-new */
 new Vue({
  el: '#q-app',
  router,
  render: h => h(require('./App').default)
 })
})

Unknown custom element: <q-btn> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

 found in

---> <App> at src\App.vue
   <Root>

Answer 1

Whenever you're using any Quasar elements (eg. q-btn, q-select), you need to import and export it in your .vue file.

Example, for a <q-btn> to display, you might use <q-btn > Confirm </q-btn> But to display that, you need to include following into your .vue file. Like:

import {
     QSelect,
     QBtn
   } from 'quasar'
export {
     QSelect,
     QBtn
   } from 'quasar'

Like this, you will be registering all your components.

Answer 2

In my projects I import and use with components like this

import Quasar, { QBtn, QSelect } from 'quasar-framewok';

Vue.use(Quasar, {
    components: { QBtn, QSelect }
});

Only for test case import all

import Quasar, * as All from 'quasar';

Vue.use(Quasar, {
    components: All,
    directives: All
});

See Quasar docs