Nuxt+shadcn-vue+Storybookのテンプレートを作ってみる検証スクラップ

npx nuxi@latest init nuxt-template
✔ Which package manager would you like to use?
npm
cd nuxt-template
npm run dev

npx nuxi module add eslint

{
  "eslint.experimental.useFlatConfig": true
}

npm install --save-dev --save-exact prettier
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
touch .prettierignore

# Ignore artifacts:
public

{
  "printWidth": 100,
  "singleQuote": true
}

npm install --save-dev vue-tsc@^1 typescript

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/eslint'],
+  typescript: {
+    typeCheck: true,
+  },
});

npx nuxi module add @nuxtjs/tailwindcss
npx tailwindcss init

<template>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

npm run dev

npx nuxi@latest module add storybook

npx nuxi@latest module add @nuxtjs/storybook

npx storybook-nuxt init --enable-module
npm run dev

| components/
--| common/
----| Button/
------| Button.vue
------| Button.stories.ts
------| Button.spec.ts

mkdir -p components/common/Button
touch components/common/Button/Button.vue

<script setup lang="ts">
const props = defineProps({
  label: {
    type: String,
    required: true,
  },
});
</script>
<template>
  <button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    type="button"
  >
    {{ label }}
  </button>
</template>
<style scoped></style>

<template>
  <CommonButton label="Hello World!" />
</template>

touch components/common/Button/Button.stories.ts

import Button from './Button.vue';

export default {
  title: 'components/Button',
  component: Button,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    label: 'ボタン',
  },
};

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../**/*.mdx",
+    "../**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/eslint',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/storybook',
+    '@nuxt/test-utils/module'
  ],
  typescript: {
    typeCheck: true,
  },
});

import { defineVitestConfig } from '@nuxt/test-utils/config';

export default defineVitestConfig({
  // any custom Vitest config you require
});

+import { fileURLToPath } from 'node:url'
import { defineVitestConfig } from '@nuxt/test-utils/config';

export default defineVitestConfig({
  // any custom Vitest config you require
+  test: {
+    environment: 'nuxt',
+    // you can optionally set Nuxt-specific environment options
+    // environmentOptions: {
+    //   nuxt: {
+    //     rootDir: fileURLToPath(new URL('./playground', import.meta.url)),
+    //     domEnvironment: 'happy-dom', // 'happy-dom' (default) or 'jsdom'
+    //     overrides: {
+    //       // other Nuxt config you want to pass
+    //     }
+    //   }
+    // }
  }
});

// @vitest-environment node

import { test } from 'vitest'

test('my test', () => {

})

npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue 

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
});

"scripts": {
  "build": "nuxt build",
  "dev": "nuxt dev",
  ...
+  "test": "vitest"
},

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';

import Button from './Button.vue';

const defaultProps = {
  label: 'Hello world',
};

describe('render button', () => {
  it('is contain label', () => {
    const wrapper = mount(Button, { props: defaultProps });
    const buttonElement = wrapper.find('button');
    const buttonText = buttonElement.text();
    expect(buttonText).toBe(defaultProps.label);
  });
});

npx nuxi@latest module add shadcn-nuxt

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/eslint', "@nuxtjs/tailwindcss", "@nuxtjs/storybook", "shadcn-nuxt"],
  typescript: {
    typeCheck: true,
  },
+  shadcn: {
+    /**
+     * Prefix for all the imported component
+     */
+    prefix: '',
+    /**
+     * Directory that the component lives in.
+     * @default "./components/ui"
+     */
+    componentDir: './components/ui'
+  }
});

npx shadcn-vue@latest init

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … assets/css/tailwind.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

- import { Primitive, type PrimitiveProps } from 'radix-vue';//ここを削除
+ import { Primitive, type PrimitiveProps } from '@/node_modules/radix-vue'; //ここを追加

import { type ButtonVariants, buttonVariants } from '.';
import { cn } from '@/lib/utils';

interface Props extends PrimitiveProps {
  variant?: ButtonVariants['variant'];
  size?: ButtonVariants['size'];
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<Props>(), {
  as: 'button',
});
</script>

<template>
  <Primitive
    :as="as"
    :as-child="asChild"
    :class="cn(buttonVariants({ variant, size }), props.class)"
  >
    <slot />
  </Primitive>
</template>

npm install --save-dev husky
npx husky init

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "storybook": "storybook dev --port 6006",
    "build-storybook": "storybook build",
+    "test": "vitest",
+    "prepare": "husky"
  },

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

#npm run lint-staged && npm run test

+    "lint:es": "eslint .",
+    "lint:es:fix": "eslint . --fix"

# Ignore artifacts:
public
server
.husky
.nuxt
.output
components/common/ui
.gitignore

npm install -D stylelint
npm install -D @nuxtjs/stylelint-module

  modules: [
    '@nuxt/eslint',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/storybook',
    'shadcn-nuxt',
+    [
+      '@nuxtjs/stylelint-module',
+      {
+        extends: [
+          'stylelint-config-recommended',
+          'stylelint-config-standard',
+          'stylelint-config-recommended-vue',
+        ],
+        overrides: [
+          {
+            files: ['**/*.vue'],
+            customSyntax: 'postcss-html',
+          },
+        ],
+      },
+    ],
  ],

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "storybook": "storybook dev --port 6006",
    "build-storybook": "storybook build",
    "test": "vitest",
    "prepare": "husky",
    "lint:es": "eslint .",
    "lint:es:fix": "eslint . --fix",
+    "lint:style": "stylelint './**/*.css'",
+    "lint:style:fix": "stylelint --fix './**/*.css'",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,vue,json}'"
  },

Error: No configuration provided for

{
  "rules": {
    "block-no-empty": true
  }
}

npm install --save-dev lint-staged

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "storybook": "storybook dev --port 6006",
    "build-storybook": "storybook build",
    "test": "vitest",
    "prepare": "husky",
+    "lint": "npm run lint:es:fix && npm run lint:style:fix",
    "lint:es": "eslint .",
    "lint:es:fix": "eslint . --fix",
    "lint:style": "stylelint './**/*.css'",
    "lint:style:fix": "stylelint --fix './**/*.css'",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,vue,json}'",
+  "lint-staged": "lint-staged"
  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,vue}": [
+      "eslint",
+      "prettier --write"
+    ],
+    "*.json": [
+      "prettier --write"
+    ]
+  },