Merge pull request #1536 from GrabarzUndPartner/feature/update-components

fix(update): update components

Author: ThornWalli

nuxt.config.js

@@ -23,9 +23,14 @@ export default defineNuxtConfig(() => {
       autoImport: false
     },
 
+    components: {
+      dirs: []
+    },
+
     site: {
       indexable: false,
-      trailingSlash: true
+      trailingSlash: true,
+      url: getWebsiteHost()
     },
 
     app: {

package-lock.json

@@ -73,7 +73,8 @@
     "postcss-preset-env": "10.1.3",
     "rucksack-css": "1.0.2",
     "rxjs": "7.8.1",
-    "vite-svg-loader": "5.1.0"
+    "vite-svg-loader": "5.1.0",
+    "vue-semantic-structure": "^1.0.0"
   },
   "snyk": true
 }

package.json

@@ -24,11 +24,12 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { computed, watch, onMounted, onUnmounted } from 'vue';
-import BaseLayoutLostContainer from './LostContainer';
-
-import svgIconClose from '@/assets/svg/icons/menu-close.svg?vue-template';
 import { useLayoutStore, useModalStore } from '@/stores/layout';
 
+import BaseLayoutLostContainer from '@/components/base/layout/LostContainer.vue';
+
+import svgIconClose from '@/assets/svg/icons/menu-close.svg';
+
 const props = defineProps({
   options: {
     type: Object,

src/components/base/ContentContainer.vue

@@ -22,7 +22,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import BaseLayoutLostContainer from '@/components/base/layout/LostContainer';
+import BaseLayoutLostContainer from '@/components/base/layout/LostContainer.vue';
 
 const props = defineProps({
   options: {

src/components/base/ContentHeadline.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-content-headline class="element-headline">
+  <content-headline class="element-headline">
     <slot>
       <span
         v-if="$slots.overline || overline"
@@ -29,12 +29,13 @@
         </slot>
       </span>
     </slot>
-  </base-content-headline>
+  </content-headline>
 </template>
 
 <script setup>
+import { ContentHeadline } from 'vue-semantic-structure';
 import { useBoosterFonts } from '#imports';
-import BaseContentHeadline from '@/components/base/ContentHeadline';
+
 const { $getFont } = useBoosterFonts();
 
 defineProps({

src/components/base/layout/Modal.vue

@@ -16,7 +16,7 @@ import {useRuntimeConfig, nextTick} from '#imports'
 import {computed, onMounted, ref} from 'vue';
 
 import { joinURL } from 'ufo';
-import BoosterPicture from '#booster/components/BoosterPicture';
+import BoosterPicture from '#booster/components/BoosterPicture.vue';
 import SvgIconPlay from '@/assets/svg/icons/play.svg';
 
 const props = defineProps({

src/components/base/layout/TwoColumnContainer.vue

@@ -1,17 +1,18 @@
 <template>
-  <base-content-container class="fragment-article">
-    <template #header>
-      <element-headline v-if="headline" v-bind="headline" />
-    </template>
-    <template #default>
-      <slot>
-        <element-rich-text :content="content" />
-      </slot>
-    </template>
-  </base-content-container>
+  <content-container class="fragment-article">
+    <element-headline v-if="headline" v-bind="headline" />
+    <slot>
+      <element-rich-text :content="content" />
+    </slot>
+  </content-container>
 </template>
 
 <script setup>
+import { ContentContainer } from 'vue-semantic-structure';
+
+import ElementHeadline from '@/components/element/Headline.vue';
+import ElementRichText from '@/components/element/RichText.vue';
+
 defineProps({
   headline: {
     type: Object,