init

Author: pin705

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <client-only>
+      <custom-div></custom-div>
+    </client-only>
+  </div>
+</template>

nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+
+})

package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "^3.3.1"
+  }
+}

plugins/webComponent.client.ts

@@ -0,0 +1,17 @@
+export default defineNuxtPlugin(() => {
+    const componentName = 'custom-div'
+    if (!customElements.get(componentName)) {
+        class HelloWorldComponent extends HTMLElement {
+            constructor() {
+                super();
+            }
+
+            connectedCallback() {
+                this.innerHTML = `<h1>Hello world! I'm a custom element</h1>`
+            }
+
+        }
+
+        customElements.define(componentName, HelloWorldComponent)
+    }
+})

public/favicon.ico

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}