How to import Quasar components into existing Nuxt.js application?

tesicg

We have Nuxt.js application (SSR mode) and want to use a single Quasar component QMenu for now. I was able to use it in standard Vue.js app (without Nuxt) and everything works fine. But, when I tried to use it in Nuxt.js app it fails.

I’ve created Nuxt plugin quasar.js:

import Vue from 'vue'
import Quasar from 'quasar'

Vue.use(Quasar)

And registered it in nuxt.config.js:

plugins: [
  '~/plugins/quasar.js'
],

I’ve also added css in nuxt.config.js:

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' },

After that I’ve added the following to Catalog.vue component:

<template lang="pug">
.q-pa-md
  .q-gutter-md.row.items-center
    q-btn(color='primary', label='КАТАЛОГ ТОВАРОВ')
      q-menu(v-model='showing')
        q-list(dense style='min-width: 100px')
          q-item(v-for='category in catalog', :key='category.permalink', href='#', clickable='clickable', v-close-popup='v-close-popup')
            q-item-section {{ category.title }}
            q-item-section(side='side')
              q-icon(name='keyboard_arrow_right', v-if='category.hasChildren')
            q-menu(anchor='top end', self='top start')
              q-list
                q-item(v-for='sub in category.subcatalog', :key='sub.permalink', dense='dense', clickable='clickable')
                  q-item-section {{ sub.title }}
</template>

<script lang="ts">
import Vue from 'vue'
import {
  Quasar,
  QBtn,
  QMenu,
  QList,
  QItem,
  QItemSection,
  QIcon,
  ClosePopup
} from 'quasar'

export default Vue.extend({
  components: {
    QBtn,
    QMenu,
    QList,
    QItem,
    QItemSection,
    QIcon,
  },
  directives: {
    ClosePopup
  },
  ...

And got the following error:

ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property 'platform' of undefined"                                                                                                                         07:52:13  

found in

---> <QBtn>
	   <Catalog> at src/components/header/nav/Catalog.vue
		 <BNavbar>
		   <NavPanel> at src/components/header/NavPanel.vue
			 <PageHeader> at src/components/PageHeader.vue
			   <BaseLayout> at src/components/BaseLayout.vue
				 <Src/layouts/default.vue> at src/layouts/default.vue
				   <Root>

Is there step-by-step article or post that describes how to use a single (or more) Quasar component in existing Nuxt.js app?

Thank you in advance.