Vue3 Plugin - "[Vue warn]: Failed to resolve component: q-btn If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."

[darko7k]

Hello, I am creating a plugin in an already existing Vue3 + Quasar2 project. In this project I use Quasar components all the time without the specific need of importing or declaring them anywhere. But, when I tried converting my .vue file reusable component as a .js file plugin, I came across this error:

"[Vue warn]: Failed to resolve component: q-btn
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."

The plugin contains the "template" property where my HTML code is placed:

components: { PoisTree, QSelect, QToggle },
      mixins: [permissions],
      template: `
        <main class="full-width dynamic-page-with-filters" :class="{'q-card q-ma-md': type === 'web'}">
        <div
          :class="{'row no-wrap my-device-search': type === 'web', 'q-px-md q-pt-md': type !== 'web'}"
        >
          <q-toolbar
            v-if="localFilters != null"
            :class="{'bg-dynamic-filters-table-inputs my-toolbar q-pa-none': type !== 'web', 'shadow-new-btn-left bg-background-d q-pb-md':isShadowLayout}"
            :style="{

If I import the quasar components in the quasar-user-options file, everything works as expected, but as I found out it seems that this file (or any other file from the .quasar folder) should not be edited:

`/**

• THIS FILE IS GENERATED AUTOMATICALLY.
• DO NOT EDIT.
• You are probably looking on adding startup/initialization code.
• Use "quasar new boot " and add it there.
• One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
• boot: ['file', ...] // do not add ".js" extension to it.
• Boot files are your "main.js"
  **/

import iconSet from 'quasar/icon-set/material-icons'

import {QBtn,QTable,QItem,QList,QIcon,QInput,QSeparator,QCardSection,QCard,QCardActions,QBtnDropdown,QSpace,QTooltip,QToolbar,QTh,QTd,QItemSection,QMenu,Ripple,Notify,Dialog} from 'quasar'

export default { config: {},iconSet,components: {QBtn,QTable,QItem,QList,QIcon,QInput,QSeparator,QCardSection,QCard,QCardActions,QBtnDropdown,QSpace,QTooltip,QToolbar,QTh,QTd,QItemSection,QMenu},directives: {Ripple},plugins: {Notify,Dialog} }

`

I tried importing and declaring them in the quasar.conf.js, in the plugin file, and what not but nothing is working. I am looking for help from anyone who has knowledge about this. I am here to provide more explanation if you need it. Thank you in advance.

P.S. I needed to change this line from : import { createApp } from 'vue' to : import { createApp } from 'vue/dist/vue.esm-bundler.js'

Can I push this change to production? Will it break anything? I believe not but still I want to make sure :)

[yusufkandemir]

quasar-user-options file is for the Vite plugin or Vue CLI plugin, whereas .quasar folder is for Quasar CLI. So, there must be something wrong with your setup. If what you mean by creating a plugin is to create some re-usable code to share between projects, then check out https://quasar.dev/app-extensions/introduction/, specifically the UI kit https://quasar.dev/app-extensions/development-guide/introduction#ui-kit

[darko7k]

@yusufkandemir The quasar-user-options file is located in the .quasar folder in my project. The project is created using quasar create. Yes, by plugin I mean a reusable code which you could share between projects. I created it, I ran into the components error, I imported them into the quasar-user-options and it ran well, I published the plugin, I deleted the code, installed the plugin and all worked as expected, except that the quasar-user-options should apparently not be edited. So now I have the same error (the title of this discussion) and I can't find a solution.