feat(nuxt): add Nuxt 4 support

.github/workflows/test-nuxt3.yml

@@ -0,0 +1,64 @@
+name: Nuxt 3 tests
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    name: Build and test
+
+    env:
+      dir: ./examples/nuxt3
+
+    steps:
+      - uses: actions/checkout@master
+
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+            ~/.cache/Cypress
+          key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-v1-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Build book
+        working-directory: ${{env.dir}}
+        run: pnpm run story:build
+
+      - name: Run tests
+        working-directory: ${{env.dir}}
+        run: pnpm run ci
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ${{env.dir}}/cypress/screenshots

examples/nuxt3/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

examples/nuxt3/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

examples/nuxt3/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Hi there
+  </div>
+</template>

examples/nuxt3/components/AutoImport.story.vue

@@ -0,0 +1,18 @@
+<script setup>
+console.log('useNuxtApp', useNuxtApp())
+console.log('useNuxtApp().$config', useNuxtApp().$config)
+const config = useRuntimeConfig()
+console.log('useRuntimeConfig', config)
+</script>
+
+<template>
+  <Story>
+    <Meow />
+
+    <h3>Nuxt runtime config</h3>
+    <pre>{{ config }}</pre>
+    <p data-testid="config">
+      {{ config.public.configFromNuxt }}
+    </p>
+  </Story>
+</template>

examples/nuxt3/components/BaseButton.story.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import BaseButton from './BaseButton.vue'
+
+function initState() {
+  return {
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="BaseButton"
+    :layout="{
+      type: 'grid',
+      width: 200,
+    }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <BaseButton
+          :disabled="state.disabled"
+        >
+          Click me
+        </BaseButton>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox
+          v-model="state.disabled"
+          title="Disabled"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="big green button"
+      icon="el:resize-full"
+    >
+      <BaseButton
+        color="green"
+        size="big"
+      >
+        Click me
+      </BaseButton>
+    </Variant>
+
+    <Variant
+      title="small red button"
+      icon-color="#F43F5E"
+    >
+      <BaseButton
+        color="red"
+        size="small"
+      >
+        Click me!
+      </BaseButton>
+    </Variant>
+  </Story>
+</template>

examples/nuxt3/components/BaseButton.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+
+  size: {
+    type: String,
+    default: null,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="btn text-red-500"
+    :class="{
+      [`btn-color-${color}`]: color,
+      [`btn-size-${size}`]: size,
+    }"
+  >
+    <slot />
+  </button>
+</template>
+
+<style lang="pcss" scoped>
+.btn {
+  border-radius: 4px;
+  padding: 4px 8px;
+  background: #e4e4e4;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: #f1f1f1;
+}
+
+.btn[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.btn-color-green {
+  background: #94ffc9;
+}
+
+.btn-color-green:hover {
+  background: #acffd6;
+}
+
+.btn-color-red {
+  background: #ff9494;
+}
+
+.btn-color-red:hover {
+  background: #ffa8a8;
+}
+
+.btn-size-big {
+  font-size: 16px;
+  padding: 8px 16px;
+}
+
+.btn-size-small {
+  font-size: 12px;
+  padding: 2px 4px;
+}
+</style>

examples/nuxt3/components/BaseButtonLink.story.vue

@@ -0,0 +1,18 @@
+<template>
+  <Story
+    title="BaseButton with NuxtLink"
+    :layout="{
+      type: 'single',
+      iframe: false,
+    }"
+  >
+    <Variant>
+      <BaseButtonLink
+        variant="primary"
+        to="#"
+      >
+        Hello world
+      </BaseButtonLink>
+    </Variant>
+  </Story>
+</template>

examples/nuxt3/components/BaseButtonLink.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  to?: string
+  variant: 'primary' | 'secondary'
+}>()
+
+const computedClasses = computed(() => ({
+  'btn-base': true,
+  'btn-primary': props.variant === 'primary',
+}))
+</script>
+
+<template>
+  <NuxtLink
+    v-if="to"
+    :class="computedClasses"
+    :to="to"
+  >
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    :class="computedClasses"
+  >
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn-base {
+  padding: 7px 14px;
+}
+
+.btn-primary {
+  background: black;
+  color: white;
+}
+</style>

examples/nuxt3/components/Meow.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Meow</div>
+</template>

examples/nuxt3/components/Simple.story.vue

@@ -0,0 +1,8 @@
+<template>
+  <Story>
+    Simple story in Nuxt
+    <NuxtLink to="/">
+      NuxtLink
+    </NuxtLink>
+  </Story>
+</template>

examples/nuxt3/cypress.config.mjs

@@ -0,0 +1,21 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  viewportWidth: 1280,
+  viewportHeight: 768,
+  chromeWebSecurity: false,
+
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+
+  e2e: {
+    baseUrl: 'http://localhost:4567',
+    setupNodeEvents(_on, _config) {
+      // implement node event listeners here
+    },
+  },
+
+  video: false,
+})

examples/nuxt3/cypress/e2e/all-stories.cy.js

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+describe('Stories list', () => {
+  it('should display all stories', () => {
+    cy.clearLocalStorage()
+    cy.visit('/')
+    cy.get('[data-test-id="story-list-item"]').should('have.length', 5)
+  })
+})