feat: nuxt plugin, fix #84 (#97)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>

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/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,76 @@
+<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"
+    :class="{
+      [`btn-color-${color}`]: color,
+      [`btn-size-${size}`]: size,
+    }"
+  >
+    <slot />
+    <Meow />
+  </button>
+</template>
+
+<style 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/Meow.vue

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

examples/nuxt3/histoire.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'histoire'
+import { HstNuxt } from '@histoire/plugin-nuxt'
+
+export default defineConfig({
+  plugins: [
+    HstNuxt(),
+  ],
+})

examples/nuxt3/nuxt.config.ts

@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+
+})

examples/nuxt3/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "histoire-example-nuxt3",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview --port 4567"
+  },
+  "devDependencies": {
+    "@histoire/plugin-nuxt": "workspace:*",
+    "histoire": "workspace:*",
+    "nuxt": "^3.0.0-rc.3"
+  }
+}

examples/nuxt3/tailwind.config.cjs

@@ -0,0 +1 @@
+module.exports = {}

package.json

@@ -57,7 +57,8 @@
       "allowedVersions": {
         "eslint": "*",
         "eslint-plugin-promise": "*",
-        "eslint-plugin-vue": "*"
+        "eslint-plugin-vue": "*",
+        "vue": "*"
       }
     }
   }

packages/histoire-plugin-nuxt/README.md

@@ -0,0 +1,18 @@
+# Histoire + Nuxt 3
+
+```bash
+pnpm add -D @histoire/plugin-nuxt
+```
+
+Add the plugin in histoire config:
+
+```js
+import { defineConfig } from 'histoire'
+import { HstNuxt } from '@histoire/plugin-pnuxtercy'
+
+export default defineConfig({
+  plugins: [
+    HstNuxt(),
+  ],
+})
+```

packages/histoire-plugin-nuxt/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@histoire/plugin-nuxt",
+  "version": "0.5.4",
+  "description": "Histoire plugin to integrate with Nuxt 3",
+  "license": "MIT",
+  "author": {
+    "name": "Guillaume Chau"
+  },
+  "repository": {
+    "url": "https://github.com/Akryum/histoire.git",
+    "type": "git",
+    "directory": "packages/histoire-plugin-nuxt"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && tsc -d",
+    "watch": "tsc -d -w --sourceMap"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.0.0-rc.3"
+  },
+  "devDependencies": {
+    "@nuxt/schema": "^3.0.0-rc.3",
+    "histoire": "workspace:*",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1"
+  },
+  "peerDependencies": {
+    "histoire": "^0.5.4",
+    "nuxt": "^3.0.0-rc.3"
+  }
+}

packages/histoire-plugin-nuxt/src/index.ts

@@ -0,0 +1,80 @@
+import type { Plugin } from 'histoire'
+import type { Nuxt } from '@nuxt/schema'
+import type { UserConfig as ViteConfig } from 'vite'
+
+const ignorePlugins = [
+  'nuxt:vite-node-server',
+  'nuxt:dev-style-ssr',
+  'nuxt:vite-relative-asset',
+  'nuxt:cache-dir',
+  'nuxt:dynamic-base-path',
+  'nuxt:import-protection',
+]
+
+export function HstNuxt (): Plugin {
+  let nuxt: Nuxt
+  return {
+    name: '@histoire/plugin-nuxt',
+
+    async config (config, mode) {
+      const nuxtConfig = await useNuxtViteConfig()
+      nuxt = nuxtConfig.nuxt
+      const plugins = nuxtConfig.viteConfig.plugins.filter((p: any) => !ignorePlugins.includes(p?.name))
+
+      // Disable devServer integration from vue plugin
+      if (mode === 'build') {
+        const vuePlugin = plugins.find((p: any) => p.name === 'vite:vue')
+        if (vuePlugin) {
+          // @ts-expect-error override method
+          vuePlugin.configureServer = () => { /* noop */ }
+        }
+      }
+
+      return {
+        vite: {
+          resolve: {
+            alias: nuxtConfig.viteConfig.resolve.alias,
+          },
+          plugins,
+          // @ts-expect-error Vue-specific config
+          vue: nuxtConfig.viteConfig.vue,
+        },
+      }
+    },
+
+    onDev (api, onCleanup) {
+      onCleanup(async () => {
+        nuxt?.close()
+      })
+    },
+
+    onBuild () {
+      nuxt?.close()
+    },
+  }
+}
+
+async function useNuxtViteConfig () {
+  const { loadNuxt, buildNuxt } = await import('@nuxt/kit')
+  const nuxt = await loadNuxt({
+    ready: false,
+    dev: true,
+    overrides: {
+      ssr: false,
+    },
+  })
+  if (nuxt.options.builder as string !== '@nuxt/vite-builder') {
+    throw new Error(`Histoire only supports Vite bundler, but Nuxt builder is currently set to '${nuxt.options.builder}'.`)
+  }
+  return {
+    viteConfig: await new Promise<ViteConfig>((resolve) => {
+      nuxt.hook('vite:extendConfig', (config, { isClient }) => {
+        if (isClient) resolve({ ...config })
+      })
+      nuxt.ready().then(async () => {
+        buildNuxt(nuxt)
+      })
+    }),
+    nuxt,
+  }
+}