@@ -10,10 +10,8 @@
diff --git a/packages/tailwindcss/src/pages/index.vue b/packages/tailwindcss/src/pages/index.vue
new file mode 100644
index 00000000..e88c0a23
--- /dev/null
+++ b/packages/tailwindcss/src/pages/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/examples/tailwind-css/static/favicon.ico b/packages/tailwindcss/src/public/favicon.ico
similarity index 100%
rename from examples/tailwind-css/static/favicon.ico
rename to packages/tailwindcss/src/public/favicon.ico
diff --git a/examples/tailwind-css/static/icon.png b/packages/tailwindcss/src/public/icon.png
similarity index 100%
rename from examples/tailwind-css/static/icon.png
rename to packages/tailwindcss/src/public/icon.png
diff --git a/packages/tailwindcss/tailwind.config.js b/packages/tailwindcss/tailwind.config.js
new file mode 100644
index 00000000..c4719eb5
--- /dev/null
+++ b/packages/tailwindcss/tailwind.config.js
@@ -0,0 +1,13 @@
+export default {
+ content: [
+ './src/components/**/*.{js,vue,ts}',
+ './src/layouts/**/*.vue',
+ './src/pages/**/*.vue',
+ './src/plugins/**/*.{js,ts}',
+ './nuxt.config.{js,ts}'
+ ],
+ theme: {
+ extend: {}
+ },
+ plugins: []
+};
diff --git a/packages/vuetify/jsconfig.json b/packages/vuetify/jsconfig.json
new file mode 100644
index 00000000..4d884495
--- /dev/null
+++ b/packages/vuetify/jsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "es2015",
+ "sourceMap": true,
+ "baseUrl": ".",
+ "paths": {
+ "@nuxt-custom-elements-example/default": [
+ "../packages/default"
+ ],
+ "@/*": [
+ "src/*"
+ ],
+ "@@/*": [
+ "./*"
+ ]
+ }
+ },
+ "exclude": [
+ "node_modules"
+ ]
+}
\ No newline at end of file
diff --git a/packages/vuetify/nuxt.config.js b/packages/vuetify/nuxt.config.js
new file mode 100644
index 00000000..8d1f8067
--- /dev/null
+++ b/packages/vuetify/nuxt.config.js
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineNuxtConfig } from 'nuxt/config';
+import { readPackage } from 'read-pkg';
+import vuetify from 'vite-plugin-vuetify';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+export default defineNuxtConfig(async () => {
+ const { description } = await readPackage();
+
+ return {
+ srcDir: 'src',
+
+ nitro: {
+ prerender: {
+ crawlLinks: false
+ },
+ output: {
+ publicDir: join(process.env.DIST_PATH || '../../dist')
+ }
+ },
+
+ css: ['@nuxt-custom-elements/default/assets/css/layout.css'],
+
+ build: {
+ transpile: ['vuetify']
+ },
+
+ alias: {
+ '@nuxt-custom-elements/default': join(__dirname, '../default/src')
+ },
+
+ app: {
+ baseURL: process.env.BASE_URL || '/',
+ head: {
+ title: 'Examples - Nuxt Custom-Elements',
+ htmlAttrs: {
+ lang: 'en'
+ },
+ meta: [
+ { charset: 'utf-8' },
+ { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+ { hid: 'description', name: 'description', content: description }
+ ],
+ link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+ }
+ },
+
+ vite: {
+ plugins: [vuetify({ autoImport: true })]
+ },
+
+ postcss: {
+ plugins: {
+ 'postcss-preset-env': {
+ preserve: true,
+ stage: 0
+ }
+ },
+ order: 'cssnanoLast'
+ },
+
+ customElements: {
+ entries: [
+ {
+ viteExtend(config) {
+ config.build.minify = false;
+ config.plugins.push(vuetify({ autoImport: true }));
+ return config;
+ },
+ name: 'Example',
+ tags: [
+ {
+ name: 'CustomElementVuetify',
+ path: '@/components/customElements/Vuetify',
+ appContext: '@/components/customElements/Vuetify.appContext.js'
+ }
+ ]
+ }
+ ]
+ },
+
+ buildModules: [
+ ...((isDev && ['@nuxtjs/eslint-module', '@nuxtjs/stylelint-module']) ||
+ [])
+ ],
+
+ modules: ['nuxt-custom-elements']
+ };
+});
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
new file mode 100644
index 00000000..0a9aa5f9
--- /dev/null
+++ b/packages/vuetify/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "@nuxt-custom-elements-example/vuetify",
+ "description": "Examples for Nuxt Custom-Elements.",
+ "version": "1.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "nuxt dev",
+ "build": "nuxt build",
+ "generate": "nuxt generate",
+ "preview": "nuxt preview",
+ "start": "npx serve dist",
+ "start:custom-element": "npx serve dist/nuxt-custom-elements/example",
+ "test": "npm run lint:es && npm run lint:css",
+ "lint:es": "eslint --ext .js,.vue ./",
+ "lint:css": "stylelint \"src/**/*.vue\""
+ },
+ "dependencies": {
+ "@vueuse/head": "1.3.1",
+ "autoprefixer": "10.4.15",
+ "nuxt": "3.7.1",
+ "nuxt-custom-elements": "2.0.0-beta.24",
+ "postcss": "8.4.29",
+ "postcss-preset-env": "9.1.3",
+ "read-pkg": "8.1.0",
+ "vite-plugin-vuetify": "1.0.2",
+ "vite-svg-loader": "4.0.0",
+ "vuetify": "3.3.15"
+ }
+}
\ No newline at end of file
diff --git a/packages/vuetify/src/assets/css/vuetify-theme.css b/packages/vuetify/src/assets/css/vuetify-theme.css
new file mode 100644
index 00000000..4cd107ce
--- /dev/null
+++ b/packages/vuetify/src/assets/css/vuetify-theme.css
@@ -0,0 +1,309 @@
+:root {
+ --v-theme-background: 255,255,255;
+ --v-theme-background-overlay-multiplier: 1;
+ --v-theme-surface: 255,255,255;
+ --v-theme-surface-overlay-multiplier: 1;
+ --v-theme-surface-variant: 66,66,66;
+ --v-theme-surface-variant-overlay-multiplier: 2;
+ --v-theme-on-surface-variant: 238,238,238;
+ --v-theme-primary: 98,0,238;
+ --v-theme-primary-overlay-multiplier: 2;
+ --v-theme-primary-darken-1: 55,0,179;
+ --v-theme-primary-darken-1-overlay-multiplier: 2;
+ --v-theme-secondary: 3,218,198;
+ --v-theme-secondary-overlay-multiplier: 1;
+ --v-theme-secondary-darken-1: 1,135,134;
+ --v-theme-secondary-darken-1-overlay-multiplier: 1;
+ --v-theme-error: 176,0,32;
+ --v-theme-error-overlay-multiplier: 2;
+ --v-theme-info: 33,150,243;
+ --v-theme-info-overlay-multiplier: 1;
+ --v-theme-success: 76,175,80;
+ --v-theme-success-overlay-multiplier: 1;
+ --v-theme-warning: 251,140,0;
+ --v-theme-warning-overlay-multiplier: 1;
+ --v-theme-on-background: 0,0,0;
+ --v-theme-on-surface: 0,0,0;
+ --v-theme-on-primary: 255,255,255;
+ --v-theme-on-primary-darken-1: 255,255,255;
+ --v-theme-on-secondary: 0,0,0;
+ --v-theme-on-secondary-darken-1: 255,255,255;
+ --v-theme-on-error: 255,255,255;
+ --v-theme-on-info: 255,255,255;
+ --v-theme-on-success: 255,255,255;
+ --v-theme-on-warning: 255,255,255;
+ --v-border-color: 0, 0, 0;
+ --v-border-opacity: 0.12;
+ --v-high-emphasis-opacity: 0.87;
+ --v-medium-emphasis-opacity: 0.6;
+ --v-disabled-opacity: 0.38;
+ --v-idle-opacity: 0.04;
+ --v-hover-opacity: 0.04;
+ --v-focus-opacity: 0.12;
+ --v-selected-opacity: 0.08;
+ --v-activated-opacity: 0.12;
+ --v-pressed-opacity: 0.12;
+ --v-dragged-opacity: 0.08;
+ --v-theme-kbd: 33, 37, 41;
+ --v-theme-on-kbd: 255, 255, 255;
+ --v-theme-code: 245, 245, 245;
+ --v-theme-on-code: 0, 0, 0;
+}
+.v-theme--light {
+ color-scheme: normal;
+ --v-theme-background: 255,255,255;
+ --v-theme-background-overlay-multiplier: 1;
+ --v-theme-surface: 255,255,255;
+ --v-theme-surface-overlay-multiplier: 1;
+ --v-theme-surface-variant: 66,66,66;
+ --v-theme-surface-variant-overlay-multiplier: 2;
+ --v-theme-on-surface-variant: 238,238,238;
+ --v-theme-primary: 98,0,238;
+ --v-theme-primary-overlay-multiplier: 2;
+ --v-theme-primary-darken-1: 55,0,179;
+ --v-theme-primary-darken-1-overlay-multiplier: 2;
+ --v-theme-secondary: 3,218,198;
+ --v-theme-secondary-overlay-multiplier: 1;
+ --v-theme-secondary-darken-1: 1,135,134;
+ --v-theme-secondary-darken-1-overlay-multiplier: 1;
+ --v-theme-error: 176,0,32;
+ --v-theme-error-overlay-multiplier: 2;
+ --v-theme-info: 33,150,243;
+ --v-theme-info-overlay-multiplier: 1;
+ --v-theme-success: 76,175,80;
+ --v-theme-success-overlay-multiplier: 1;
+ --v-theme-warning: 251,140,0;
+ --v-theme-warning-overlay-multiplier: 1;
+ --v-theme-on-background: 0,0,0;
+ --v-theme-on-surface: 0,0,0;
+ --v-theme-on-primary: 255,255,255;
+ --v-theme-on-primary-darken-1: 255,255,255;
+ --v-theme-on-secondary: 0,0,0;
+ --v-theme-on-secondary-darken-1: 255,255,255;
+ --v-theme-on-error: 255,255,255;
+ --v-theme-on-info: 255,255,255;
+ --v-theme-on-success: 255,255,255;
+ --v-theme-on-warning: 255,255,255;
+ --v-border-color: 0, 0, 0;
+ --v-border-opacity: 0.12;
+ --v-high-emphasis-opacity: 0.87;
+ --v-medium-emphasis-opacity: 0.6;
+ --v-disabled-opacity: 0.38;
+ --v-idle-opacity: 0.04;
+ --v-hover-opacity: 0.04;
+ --v-focus-opacity: 0.12;
+ --v-selected-opacity: 0.08;
+ --v-activated-opacity: 0.12;
+ --v-pressed-opacity: 0.12;
+ --v-dragged-opacity: 0.08;
+ --v-theme-kbd: 33, 37, 41;
+ --v-theme-on-kbd: 255, 255, 255;
+ --v-theme-code: 245, 245, 245;
+ --v-theme-on-code: 0, 0, 0;
+}
+.v-theme--dark {
+ color-scheme: dark;
+ --v-theme-background: 18,18,18;
+ --v-theme-background-overlay-multiplier: 1;
+ --v-theme-surface: 33,33,33;
+ --v-theme-surface-overlay-multiplier: 1;
+ --v-theme-surface-variant: 189,189,189;
+ --v-theme-surface-variant-overlay-multiplier: 2;
+ --v-theme-on-surface-variant: 66,66,66;
+ --v-theme-primary: 187,134,252;
+ --v-theme-primary-overlay-multiplier: 2;
+ --v-theme-primary-darken-1: 55,0,179;
+ --v-theme-primary-darken-1-overlay-multiplier: 1;
+ --v-theme-secondary: 3,218,197;
+ --v-theme-secondary-overlay-multiplier: 2;
+ --v-theme-secondary-darken-1: 3,218,197;
+ --v-theme-secondary-darken-1-overlay-multiplier: 2;
+ --v-theme-error: 207,102,121;
+ --v-theme-error-overlay-multiplier: 2;
+ --v-theme-info: 33,150,243;
+ --v-theme-info-overlay-multiplier: 2;
+ --v-theme-success: 76,175,80;
+ --v-theme-success-overlay-multiplier: 2;
+ --v-theme-warning: 251,140,0;
+ --v-theme-warning-overlay-multiplier: 2;
+ --v-theme-on-background: 255,255,255;
+ --v-theme-on-surface: 255,255,255;
+ --v-theme-on-primary: 255,255,255;
+ --v-theme-on-primary-darken-1: 255,255,255;
+ --v-theme-on-secondary: 0,0,0;
+ --v-theme-on-secondary-darken-1: 0,0,0;
+ --v-theme-on-error: 255,255,255;
+ --v-theme-on-info: 255,255,255;
+ --v-theme-on-success: 255,255,255;
+ --v-theme-on-warning: 255,255,255;
+ --v-border-color: 255, 255, 255;
+ --v-border-opacity: 0.12;
+ --v-high-emphasis-opacity: 1;
+ --v-medium-emphasis-opacity: 0.7;
+ --v-disabled-opacity: 0.5;
+ --v-idle-opacity: 0.1;
+ --v-hover-opacity: 0.04;
+ --v-focus-opacity: 0.12;
+ --v-selected-opacity: 0.08;
+ --v-activated-opacity: 0.12;
+ --v-pressed-opacity: 0.16;
+ --v-dragged-opacity: 0.08;
+ --v-theme-kbd: 33, 37, 41;
+ --v-theme-on-kbd: 255, 255, 255;
+ --v-theme-code: 52, 52, 52;
+ --v-theme-on-code: 204, 204, 204;
+}
+.bg-background {
+ --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier);
+ background-color: rgb(var(--v-theme-background)) !important;
+ color: rgb(var(--v-theme-on-background)) !important;
+}
+.bg-surface {
+ --v-theme-overlay-multiplier: var(--v-theme-surface-overlay-multiplier);
+ background-color: rgb(var(--v-theme-surface)) !important;
+ color: rgb(var(--v-theme-on-surface)) !important;
+}
+.bg-surface-variant {
+ --v-theme-overlay-multiplier: var(--v-theme-surface-variant-overlay-multiplier);
+ background-color: rgb(var(--v-theme-surface-variant)) !important;
+ color: rgb(var(--v-theme-on-surface-variant)) !important;
+}
+.bg-primary {
+ --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier);
+ background-color: rgb(var(--v-theme-primary)) !important;
+ color: rgb(var(--v-theme-on-primary)) !important;
+}
+.bg-primary-darken-1 {
+ --v-theme-overlay-multiplier: var(--v-theme-primary-darken-1-overlay-multiplier);
+ background-color: rgb(var(--v-theme-primary-darken-1)) !important;
+ color: rgb(var(--v-theme-on-primary-darken-1)) !important;
+}
+.bg-secondary {
+ --v-theme-overlay-multiplier: var(--v-theme-secondary-overlay-multiplier);
+ background-color: rgb(var(--v-theme-secondary)) !important;
+ color: rgb(var(--v-theme-on-secondary)) !important;
+}
+.bg-secondary-darken-1 {
+ --v-theme-overlay-multiplier: var(--v-theme-secondary-darken-1-overlay-multiplier);
+ background-color: rgb(var(--v-theme-secondary-darken-1)) !important;
+ color: rgb(var(--v-theme-on-secondary-darken-1)) !important;
+}
+.bg-error {
+ --v-theme-overlay-multiplier: var(--v-theme-error-overlay-multiplier);
+ background-color: rgb(var(--v-theme-error)) !important;
+ color: rgb(var(--v-theme-on-error)) !important;
+}
+.bg-info {
+ --v-theme-overlay-multiplier: var(--v-theme-info-overlay-multiplier);
+ background-color: rgb(var(--v-theme-info)) !important;
+ color: rgb(var(--v-theme-on-info)) !important;
+}
+.bg-success {
+ --v-theme-overlay-multiplier: var(--v-theme-success-overlay-multiplier);
+ background-color: rgb(var(--v-theme-success)) !important;
+ color: rgb(var(--v-theme-on-success)) !important;
+}
+.bg-warning {
+ --v-theme-overlay-multiplier: var(--v-theme-warning-overlay-multiplier);
+ background-color: rgb(var(--v-theme-warning)) !important;
+ color: rgb(var(--v-theme-on-warning)) !important;
+}
+.text-background {
+ color: rgb(var(--v-theme-background)) !important;
+}
+.border-background {
+ --v-border-color: var(--v-theme-background);
+}
+.text-surface {
+ color: rgb(var(--v-theme-surface)) !important;
+}
+.border-surface {
+ --v-border-color: var(--v-theme-surface);
+}
+.text-surface-variant {
+ color: rgb(var(--v-theme-surface-variant)) !important;
+}
+.border-surface-variant {
+ --v-border-color: var(--v-theme-surface-variant);
+}
+.on-surface-variant {
+ color: rgb(var(--v-theme-on-surface-variant)) !important;
+}
+.text-primary {
+ color: rgb(var(--v-theme-primary)) !important;
+}
+.border-primary {
+ --v-border-color: var(--v-theme-primary);
+}
+.text-primary-darken-1 {
+ color: rgb(var(--v-theme-primary-darken-1)) !important;
+}
+.border-primary-darken-1 {
+ --v-border-color: var(--v-theme-primary-darken-1);
+}
+.text-secondary {
+ color: rgb(var(--v-theme-secondary)) !important;
+}
+.border-secondary {
+ --v-border-color: var(--v-theme-secondary);
+}
+.text-secondary-darken-1 {
+ color: rgb(var(--v-theme-secondary-darken-1)) !important;
+}
+.border-secondary-darken-1 {
+ --v-border-color: var(--v-theme-secondary-darken-1);
+}
+.text-error {
+ color: rgb(var(--v-theme-error)) !important;
+}
+.border-error {
+ --v-border-color: var(--v-theme-error);
+}
+.text-info {
+ color: rgb(var(--v-theme-info)) !important;
+}
+.border-info {
+ --v-border-color: var(--v-theme-info);
+}
+.text-success {
+ color: rgb(var(--v-theme-success)) !important;
+}
+.border-success {
+ --v-border-color: var(--v-theme-success);
+}
+.text-warning {
+ color: rgb(var(--v-theme-warning)) !important;
+}
+.border-warning {
+ --v-border-color: var(--v-theme-warning);
+}
+.on-background {
+ color: rgb(var(--v-theme-on-background)) !important;
+}
+.on-surface {
+ color: rgb(var(--v-theme-on-surface)) !important;
+}
+.on-primary {
+ color: rgb(var(--v-theme-on-primary)) !important;
+}
+.on-primary-darken-1 {
+ color: rgb(var(--v-theme-on-primary-darken-1)) !important;
+}
+.on-secondary {
+ color: rgb(var(--v-theme-on-secondary)) !important;
+}
+.on-secondary-darken-1 {
+ color: rgb(var(--v-theme-on-secondary-darken-1)) !important;
+}
+.on-error {
+ color: rgb(var(--v-theme-on-error)) !important;
+}
+.on-info {
+ color: rgb(var(--v-theme-on-info)) !important;
+}
+.on-success {
+ color: rgb(var(--v-theme-on-success)) !important;
+}
+.on-warning {
+ color: rgb(var(--v-theme-on-warning)) !important;
+}
diff --git a/packages/vuetify/src/components/Example.vue b/packages/vuetify/src/components/Example.vue
new file mode 100644
index 00000000..28d4567f
--- /dev/null
+++ b/packages/vuetify/src/components/Example.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Your Dashboard
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+ {{ text }}
+
+
+
+
+
+
+
diff --git a/packages/vuetify/src/components/customElements/Vuetify.appContext.js b/packages/vuetify/src/components/customElements/Vuetify.appContext.js
new file mode 100644
index 00000000..8fe7f1d1
--- /dev/null
+++ b/packages/vuetify/src/components/customElements/Vuetify.appContext.js
@@ -0,0 +1,14 @@
+import { createVuetify } from 'vuetify/lib/framework';
+// import { createHead } from 'unhead';
+import { createHead } from '@vueuse/head';
+import config from '@/../vuetify.config';
+
+export default function (Vue) {
+ const head = createHead({ document: null });
+ Vue.use(head);
+
+ // Important: Vuetify Theme must be deactivated and a theming imported in the entry.
+ // Background: Vuetify adds the CSS per header, but does nothing for the CustomElement with Shadow CSS. Therefore, this must be imported separately.
+ const vuetify = createVuetify({ ssr: false, ...config, theme: false });
+ Vue.use(vuetify);
+}
diff --git a/packages/vuetify/src/components/customElements/Vuetify.vue b/packages/vuetify/src/components/customElements/Vuetify.vue
new file mode 100644
index 00000000..08ee42c9
--- /dev/null
+++ b/packages/vuetify/src/components/customElements/Vuetify.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/packages/vuetify/src/layouts/default.vue b/packages/vuetify/src/layouts/default.vue
new file mode 100644
index 00000000..56a8b72d
--- /dev/null
+++ b/packages/vuetify/src/layouts/default.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/packages/vuetify/src/pages/frames/custom.vue b/packages/vuetify/src/pages/frames/custom.vue
new file mode 100644
index 00000000..178f0d6f
--- /dev/null
+++ b/packages/vuetify/src/pages/frames/custom.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/tailwind-css/pages/frames/nuxt.vue b/packages/vuetify/src/pages/frames/nuxt.vue
similarity index 68%
rename from examples/tailwind-css/pages/frames/nuxt.vue
rename to packages/vuetify/src/pages/frames/nuxt.vue
index ab78b6ba..bb771225 100644
--- a/examples/tailwind-css/pages/frames/nuxt.vue
+++ b/packages/vuetify/src/pages/frames/nuxt.vue
@@ -1,6 +1,6 @@
-
-
Back to Overview
-
- 
- 
Open example export…