vue config update

src/de/integration/nuxt.md

@@ -17,6 +17,37 @@ Importiere das Modul in der Komponente, in welcher du den Button verwenden möch
 import 'add-to-calendar-button';
 ```
 
-## Schritt 3: Loslegen
+## Schritt 3: Optimiere die Konfiguration
+
+Theoretisch war es das schon.
+
+Vue funktioniert wunderbar mit Web Components.
+
+Allerdings wirst du feststellen, dass die Anwendung in deiner Browser-Konsole eine Warnung wirft.
+Um diese aufzulösen musst du dem Vue Compiler ein paar mehr Informationen mitgeben.
+
+Dies geschieht tendenziell in einem Vue-Block in der `nuxt.config.ts`.
+
+```javascript
+// nuxt.config.js oder nuxt.config.ts
+
+vue: {
+  compilerOptions: {
+    isCustomElement: (tag) => tag.includes('-'),
+  },
+}
+```
+
+Für den Fall, dass der Add to Calendar Button der einzige Web Component in deinem Projekt ist, kannst du hierbei auch etwas konkreter werden.
+
+```javascript
+vue: {
+  compilerOptions: {
+    isCustomElement: (tag) => tag === 'add-to-calendar-button',
+  },
+}
+```
+
+## Schritt 4: Loslegen
 
 Beginne mit der Nutzung, indem du einen `<add-to-calendar-button proKey="prokey-deines-events" />` Tag in deinen Quellcode einfügst.

src/de/integration/vue.md

@@ -38,13 +38,11 @@ compilerOptions: {
 
 Für den Fall, dass der Add to Calendar Button der einzige Web Component in deinem Projekt ist, kannst du hierbei auch etwas konkreter werden.
 
-Unsere Empfehlung wäre hier, Tags, die mit "add-" starten, pauschal als "Custom Elements" zu definieren.
-
 ```javascript
 // vite.config.js oder vite.config.ts
 
 compilerOptions: {
-  isCustomElement: (tag) => tag.startsWith('add-')
+  isCustomElement: (tag) => tag === 'add-to-calendar-button'
 }
 ```
 

src/integration/nuxt.md

@@ -17,6 +17,37 @@ Import the module into the component, where you want to use the button.
 import 'add-to-calendar-button';
 ```
 
-## Step 3: Use it
+## Step 3: Optimize the config
+
+Theoretically, this was already it.
+
+Vue works extremely well with Web Components.
+
+However, you might notice a warning in the browser console.
+To get rid of this, you need to provide a little bit more information to the vue compiler options.
+
+This usually goes into your `nuxt.config.ts`.
+
+```javascript
+// nuxt.config.js or nuxt.config.ts
+
+vue: {
+  compilerOptions: {
+    isCustomElement: (tag) => tag.includes('-'),
+  },
+}
+```
+
+In case the Add to Calendar Button is the only Web Component in your project, you could also be a little bit more explicit here.
+
+```javascript
+vue: {
+  compilerOptions: {
+    isCustomElement: (tag) => tag === 'add-to-calendar-button',
+  },
+}
+```
+
+## Step 4: Use it
 
 Start using it by adding a `<add-to-calendar-button proKey="prokey-of-your-event" />` tag to your source code.

src/integration/vue.md

@@ -38,13 +38,11 @@ compilerOptions: {
 
 In case the Add to Calendar Button is the only Web Component in your project, you could also be a little bit more explicit here.
 
-In this case, our recommendation is to define tags, which start with "add-" as "custom elements".
-
 ```javascript
 // vite.config.js or vite.config.ts
 
 compilerOptions: {
-  isCustomElement: (tag) => tag.startsWith('add-')
+  isCustomElement: (tag) => tag === 'add-to-calendar-button'
 }
 ```