docs(update): update playground and docs

basics · Sep 26, 2024 · 6904b10 · 6904b10
1 parent 35ec551
commit 6904b10
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 4 deletions.
diff --git a/docs/src/components/content-container.md b/docs/src/components/content-container.md
@@ -83,6 +83,11 @@ Can be used to overwrite the level.
     </ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

diff --git a/docs/src/components/content-headline.md b/docs/src/components/content-headline.md
@@ -60,6 +60,11 @@ Tag for the element.
     </ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

diff --git a/docs/src/introduction.md b/docs/src/introduction.md
@@ -58,6 +58,11 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
     <footer>Footer</footer>
   </div>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

diff --git a/docs/src/usage.md b/docs/src/usage.md
@@ -20,6 +20,10 @@ The main structure is in the `<main>` tag, which contains the main components.
     <ContentContainer class="gallery">…</ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+</script>
 ```
 
 ```html [HTML]
@@ -52,7 +56,7 @@ It is recommended to create a separate component that extends the `ContentContai
 </template>
 
 <script setup>
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 </script>
 ```
 
@@ -70,6 +74,10 @@ In comparison to the basic application, the entire content is enclosed in anothe
     </CustomContentContainer>
   </CustomContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+</script>
 ```
 
 ```html [HTML]

diff --git a/playground/src/components/DebugArticleContentContainer.vue b/playground/src/components/DebugArticleContentContainer.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 
 const props = defineProps({
   debug: {

diff --git a/playground/src/components/DebugContainer.vue b/playground/src/components/DebugContainer.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 
 const props = defineProps({
   debug: {

diff --git a/playground/src/components/DebugHeadline.vue b/playground/src/components/DebugHeadline.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { inject } from 'vue';
-import { ContentHeadline } from 'vue-semantic-structure';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 
 const debug = inject('debugHeadings', false);
 </script>