Everything works fine when mounting as a standard app, but not when using defineCustomElement.
The components are displayed, but with no styles.
Are there any simple demos or guidelines for how to get it to work correctly?
Any help to get this working would be GREATLY APPRECIATED!
main.js
Code: Select all
import { defineCustomElement } from 'vue';
import Test from './Test.ce.vue'
const element = defineCustomElement(Test);
customElements.define('my-component', element)
Code: Select all
<template>
<div class="grid p-2">
<div class="col-12">
<card>
<template #content>
Card TEST
<Button type="button" icon="pi pi-caret-right" label="Press Me" />
</template>
</card>
</div>
</div>
</template>
<script setup>
import PrimeVue from 'primevue/config';
import Card from 'primevue/card';
import Button from 'primevue/button';
import 'primeflex/primeflex.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
</script>
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
<my-component></my-component>
</body>
</html>
Code: Select all
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'url'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), eslintPlugin()],
isCustomElement: (tag) => tag.includes('-'),
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Code: Select all
{
"name": "vue-create-example",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"primeflex": "^3.2.1",
"primeicons": "^6.0.1",
"primevue": "^3.17.0",
"vue": "^3.2.36"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.1.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"vite": "^2.9.12",
"vite-plugin-eslint": "^1.6.1"
}
}