Connect components to site

components/nuxt.js

@@ -0,0 +1,9 @@
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+
+export default defineNuxtModule({
+	async setup() {
+		const { resolve } = createResolver(import.meta.url);
+
+		addPlugin(resolve('./nuxt.plugin.js'));
+	},
+});

components/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app';
+import * as components from './src/index.ts';
+
+export default defineNuxtPlugin((nuxtApp) => {
+	for (const [name, component] of Object.entries(components)) {
+		nuxtApp.vueApp.component(name, component);
+	}
+});

components/package.json

@@ -15,7 +15,8 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./package.json": "./package.json",
-		"./styles": "./src/theme/main.css"
+		"./styles": "./src/theme/main.css",
+		"./nuxt": "./nuxt.js"
 	},
 	"main": "dist/index.js",
 	"files": [

components/src/index.ts

@@ -1,2 +1,3 @@
 export { default as BaseIcon } from './base-icon/base-icon.vue';
-export { default as BaseDivider } from './base-button/base-divider.vue';
+export { default as BaseDivider } from './base-divider/base-divider.vue';
+export { default as BaseHeading } from './base-heading/base-heading.vue';

components/tsconfig.json

@@ -1,7 +1,4 @@
 {
 	"extends": "@directus/tsconfig/node18-esm.json",
-	"compilerOptions": {
-		"outDir": "dist"
-	},
 	"include": ["src"]
 }