From d685bc0ab3704772d68e825da72b5f5c243ebd8a Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Mon, 27 Jan 2025 19:09:13 +0100
Subject: [PATCH] docs(pages): added integration nuxt 3

---
 docs/.vitepress/navigation.js  |   4 ++
 docs/src/integration/nuxt-3.md | 123 +++++++++++++++++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 docs/src/integration/nuxt-3.md

diff --git a/docs/.vitepress/navigation.js b/docs/.vitepress/navigation.js
index 6c59f8c..03f1e34 100644
--- a/docs/.vitepress/navigation.js
+++ b/docs/.vitepress/navigation.js
@@ -27,6 +27,10 @@ export default {
         { text: 'ContentHeadline', link: '/components/content-headline' },
         { text: 'ContentContainer', link: '/components/content-container' }
       ]
+    },
+    {
+      text: 'Integration',
+      items: [{ text: 'Nuxt 3', link: '/integration/nuxt-3' }]
     }
   ],
 
diff --git a/docs/src/integration/nuxt-3.md b/docs/src/integration/nuxt-3.md
new file mode 100644
index 0000000..696fa90
--- /dev/null
+++ b/docs/src/integration/nuxt-3.md
@@ -0,0 +1,123 @@
+---
+title: Nuxt 3 Integration
+---
+
+# {{$frontmatter.title}}
+
+The integration in Nuxt is done in a few steps.
+
+The following settings must be adjusted:
+
+- Layout
+- Page Component
+
+## Layout
+
+In the layout, the component `ContentContainer` must be placed around the respective page slot.
+The `ContentContainer` defined there represents the `main` of the page.
+
+::: code-group
+
+```vue [layouts/default.vue]
+<template>
+  <div>
+    <!-- main -->
+    <ContentContainer>
+      <slot />
+    </ContentContainer>
+  </div>
+</template>
+
+<script setup>
+import { ContentContainer } from 'vue-semantic-structure'
+</script>
+```
+
+:::
+
+## Page Component
+
+With the exception of the first component, each additional component must contain a `ContentContainer`.
+
+::: code-group
+
+```vue[pages/index.vue]
+<template>
+  <div>
+    <FirstComponent />
+    <OtherComponentA />
+    <OtherComponentB />
+  </div>
+</template>
+
+<script setup>
+import FirstComponent from '~/components/FirstComponent.vue'
+import OtherComponentA from '~/components/OtherComponentA.vue'
+import OtherComponentB from '~/components/OtherComponentB.vue'
+
+```
+
+```vue[FirstComponent.vue]
+<template>
+  <header>
+    <!-- h1 -->
+    <ContentHeadline>Headline</ContentHeadline>
+  </header>
+</template>
+
+<script setup>
+import { ContentHeadline } from 'vue-semantic-structure'
+</script>
+```
+
+```vue[OtherComponentA.vue]
+<template>
+  <!-- article -->
+  <ContentContainer>
+    <!-- h2 -->
+    <ContentHeadline>Headline</ContentHeadline>
+  </ContentContainer>
+</template>
+
+<script setup>
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure'
+</script>
+```
+
+```vue[OtherComponentB.vue]
+<template>
+  <!-- article -->
+  <ContentContainer>
+    <!-- h2 -->
+    <ContentHeadline>Headline</ContentHeadline>
+  </ContentContainer>
+</template>
+
+<script setup>
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure'
+</script>
+```
+
+:::
+
+## Register Global
+
+`ContentHeadline` and `ContentContainer` can also be defined globally.
+
+Only one plugin needs to be created for this.
+
+::: code-group
+
+```js[Nuxt 3: plugin/vue-semantic-structure.js]
+import { defineNuxtPlugin } from 'nuxt/app';
+import { ContentHeadline, ContentContainer } from 'vue-semantic-structure';
+
+export default defineNuxtPlugin({
+  async setup(nuxtApp) {
+    nuxtApp.vueApp.component('ContentHeadline', ContentHeadline);
+    nuxtApp.vueApp.component('ContentContainer', ContentContainer);
+  }
+});
+```
+
+:::