'In the component library tags from other libraries do not compile
I extract components to my library which uses quasar. Here is an example of a component.
HelloWorld.vue
<template>
<q-page class="flex flex-center">
<img
alt="Quasar logo"
src="../assets/logo.svg"
style="width: 200px; height: 200px"
/>
<Input />
<div class="q-pa-md">
<q-btn color="primary" label="Primary" />
</div>
</q-page>
</template>
<script setup>
import Input from "./InputText.vue";
</script>
rollup.config.js
import vue from "rollup-plugin-vue";
import buble from "@rollup/plugin-buble";
import image from "@rollup/plugin-image";
import postcss from "rollup-plugin-postcss";
import commonjs from "@rollup/plugin-commonjs";
import { babel } from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import typescript from "rollup-plugin-typescript2";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
export default [
{
input: "src/index.js",
output: [
{
format: "esm",
file: "dist/library.mjs",
exports: "named",
globals: { vue: "Vue" },
},
{
format: "cjs",
file: "dist/library.js",
exports: "named",
globals: { vue: "Vue" },
},
],
globals: { vue: "Vue" },
external: ["vue"],
plugins: [
peerDepsExternal(),
vue(),
nodeResolve(),
typescript(),
babel(),
commonjs(),
postcss(),
image(),
buble({
objectAssign: "Object.assign",
}),
terser(),
],
},
];
This is the main project file where the library is imported
Index.vue
<template>
<q-page class="row items-center justify-evenly">
<q-btn color="primary" label="Primary" />
<HelloWorld />
</q-page>
</template>
<script>
import {defineComponent, ref} from 'vue';
import { HelloWorld } from 'my-library';
</script>
The problem is that when I import a component into my main project, I get an error.
Failed to resolve component: q-btn
Quasar tags not compiling to html
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
