chore: update vue output target and add nuxt csr app

.prettierignore

@@ -11,6 +11,8 @@ libraries/ui-library/loader
 libraries/ui-library/docs
 libraries/ui-library/hydrate
 .angular
+.nuxt
+.output
 stencil-generated
 docs/examples
 docs/components

docs/changelog.md

@@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ### Added
 
 - **⚠️Experimental**: Bringing back the support for React output target.
-- **⚠️Experimental**: Adding example React app with Vite.
+- **⚠️Experimental**: Added example React app with Vite.
+- **⚠️Experimental**: Added example Nuxt app with Client Side Rendering (CSR).
 
 - [Documentation](guide/angular.md) for using web components with Angular's standalone bootstrapping
 - `six-header-dropdown`: Added `filter` and `filterPlaceholder` properties.
@@ -40,6 +41,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   The SIX Webcomponents cannot be used with Node 16 or 18 anymore. Please upgrade to Node 20.
 
 - Moved `six-picto` SVG's from SCSS file to assets folder to minimize chunk size.
+- Upgraded Stencil to latest release and upgraded Vue output target
 
 ## 4.3.2 - 2025-02-13
 

examples/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxt/app.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import {
+  SixAvatar,
+  SixHeader,
+  SixHeaderDropdownItem,
+  SixHeaderItem,
+  SixHeaderMenuButton,
+  SixIcon,
+  SixIconButton,
+  SixLogo,
+  SixMenu,
+  SixMenuItem,
+  SixRoot,
+  SixSearchField,
+  SixSidebar,
+  SixSidebarItemGroup,
+} from '@six-group/ui-library-vue';
+import { ref } from 'vue';
+
+import '@six-group/ui-library/dist/ui-library/ui-library.css';
+
+import { defineCustomElements } from '@six-group/ui-library/loader';
+
+defineCustomElements();
+
+const router = useRouter();
+
+const navManager = {
+  navigate: (payload: { event: Event; routerLink: string }) => {
+    router.push(payload.routerLink);
+  },
+};
+
+const nuxtApp = useNuxtApp();
+nuxtApp.provide('navManager', navManager);
+
+const leftSidebarOpen = ref(true);
+const route = useRoute();
+
+const apps = ref(['App 1', 'App 2', 'App 3', 'App 4']);
+const activeApp = ref('App 2');
+
+const searchActive = ref(false);
+</script>
+
+<template>
+  <NuxtLayout>
+    <six-root>
+      <SixHeader slot="header" :openSearch="searchActive">
+        <!-- hamburger menu -->
+        <SixHeaderItem>
+          <SixIconButton :name="leftSidebarOpen ? 'menu_open' : 'menu'" @click="leftSidebarOpen = !leftSidebarOpen" />
+        </SixHeaderItem>
+
+        <!-- logo -->
+        <SixHeaderItem>
+          <SixIconButton href="https://six-group.github.io/six-webcomponents/demo/nuxt/">
+            <six-logo></six-logo>
+          </SixIconButton>
+        </SixHeaderItem>
+
+        <!-- Search -->
+        <SixHeaderItem :active="searchActive" class="search-icon">
+          <SixIconButton name="search" @click="searchActive = !searchActive" />
+        </SixHeaderItem>
+
+        <!-- search input -->
+        <six-search-field slot="search-field" :debounce="600" clearable />
+
+        <!-- App Switcher -->
+        <SixHeaderDropdownItem>
+          <SixHeaderMenuButton slot="trigger">
+            <span>{{ activeApp }}</span>
+            <six-icon slot="suffix">apps</six-icon>
+          </SixHeaderMenuButton>
+          <six-menu>
+            <six-menu-item v-for="app of apps" :checked="activeApp === app" :value="app" @click="activeApp = app">
+              {{ app }}
+            </six-menu-item>
+          </six-menu>
+        </SixHeaderDropdownItem>
+
+        <!-- profile -->
+        <SixHeaderDropdownItem>
+          <SixIconButton slot="trigger">
+            <six-avatar
+              image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+            >
+            </six-avatar>
+          </SixIconButton>
+          <six-menu>
+            <six-menu-item value="change-password">Change password</six-menu-item>
+            <six-menu-item value="logout">Logout</six-menu-item>
+          </six-menu>
+        </SixHeaderDropdownItem>
+      </SixHeader>
+
+      <!-- sidebar -->
+      <six-sidebar slot="left-sidebar" position="left" :open="leftSidebarOpen">
+        <NuxtLink to="/">
+          <six-sidebar-item-group name="Home" icon="home"> </six-sidebar-item-group>
+        </NuxtLink>
+        <NuxtLink to="/form">
+          <six-sidebar-item-group :open="route.name === 'form'" name="Form" icon="assignment"> </six-sidebar-item-group>
+        </NuxtLink>
+        <NuxtLink to="/alert">
+          <six-sidebar-item-group :open="route.name === 'alert'" name="Alert" icon="notifications_active">
+          </six-sidebar-item-group>
+        </NuxtLink>
+        <NuxtLink to="/dialog">
+          <six-sidebar-item-group :open="route.name === 'dialog'" name="Dialog" icon="web_asset">
+          </six-sidebar-item-group>
+        </NuxtLink>
+        <NuxtLink to="/details">
+          <six-sidebar-item-group :open="route.name === 'details'" name="Details" icon="unfold_more">
+          </six-sidebar-item-group>
+        </NuxtLink>
+        <NuxtLink to="/tab-group">
+          <six-sidebar-item-group :open="route.name === 'tab-group'" name="Tab Group" icon="tab">
+          </six-sidebar-item-group>
+        </NuxtLink>
+      </six-sidebar>
+      <div slot="main">
+        <NuxtPage />
+      </div>
+    </six-root>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+six-root {
+  height: 100vh;
+}
+
+[slot='right-sidebar'] six-sidebar {
+  background: var(--six-color-web-rock-600);
+}
+
+[slot='main'] {
+  padding-left: var(--six-spacing-xxx-large);
+  padding-right: var(--six-spacing-xxx-large);
+}
+
+.search-icon {
+  margin-left: auto;
+}
+
+a {
+  text-decoration: none;
+}
+</style>

examples/nuxt/assets/scss/main.scss

@@ -0,0 +1,83 @@
+/* You can add global styles to this file, and also import other style files */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+textarea {
+  font-family: 'Noto Sans Mono', monospace;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+  list-style-type: none;
+}
+
+dd,
+dt {
+  padding: 0;
+  margin: 0;
+}
+
+@import '@six-group/ui-library/dist/ui-library/ui-library.css';

examples/nuxt/components/Input.vue

@@ -0,0 +1,54 @@
+<script>
+import { defineComponent, ref } from 'vue';
+import { SixInput } from '@six-group/ui-library-vue';
+
+export default defineComponent({
+  name: 'Input',
+  components: {
+    SixInput,
+  },
+  setup() {
+    const inputEvent = ref('');
+    const changeEvent = ref('');
+
+    const handleInput = (ev) => {
+      console.log('handleInput', ev.target.value);
+      inputEvent.value = ev.target.value;
+    };
+
+    const handleChange = (ev) => {
+      console.log('handleChange', ev.target.value);
+      changeEvent.value = ev.detail.value;
+    };
+
+    return {
+      inputEvent,
+      changeEvent,
+      handleInput,
+      handleChange,
+    };
+  },
+  data() {
+    return {
+      activeColor: 'red',
+      fontSize: 30,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.inputResult {
+  color: green;
+}
+</style>
+
+<template>
+  <div>
+    <SixInput @myInput="handleInput" @myChange="handleChange"> </SixInput>
+    <div class="inputResult" :style="{ color: activeColor, fontSize: fontSize + 'px' }">
+      <p>Input Event: {{ inputEvent }}</p>
+      <p>Change Event: {{ changeEvent }}</p>
+    </div>
+  </div>
+</template>

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  css: ['~/assets/scss/main.scss'],
+  ssr: false,
+});

examples/nuxt/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "start": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "wdio run ./test/wdio.conf.ts"
+  },
+  "dependencies": {
+    "@six-group/ui-library": "*",
+    "@six-group/ui-library-vue": "*",
+    "nuxt": "^3.16.2"
+  },
+  "devDependencies": {
+    "@wdio/cli": "^9.4.5",
+    "@wdio/globals": "^9.1.3",
+    "@wdio/local-runner": "^9.1.3",
+    "@wdio/mocha-framework": "^9.1.3",
+    "@wdio/spec-reporter": "^9.1.3",
+    "sass": "^1.86.0",
+    "tsx": "^4.19.1",
+    "typescript": "^5.4.5",
+    "wdio-nuxt-service": "^0.2.0"
+  }
+}