Nuxt Bridge + Vuetify2 + Storybook (2023-05)

$ npx create-nuxt-app hello

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in hello
? Project name: hello
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

- "nuxt": "^2.15.0"
+ "nuxt": "^2.16.0"

$ npm install

$ npm run dev

$ npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxi dev",
-   "build": "nuxt build",
+   "build": "nuxi generate",　　※ for SPA
-   "start": "nuxt start",
+   "start": "nuxi preview"
  }
}

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Your existing configuration
})

file:///D:/try/hello/.nuxt/dev/index.mjs:15
import defu, { defuFn } from 'file://D:/try/hello/node_modules/defu/dist/defu.mjs';
               ^^^^^^
SyntaxError: The requested module 'file://D:/try/hello/node_modules/defu/dist/defu.mjs' does not provide an export named 'defuFn'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

ERROR  [worker reload] [worker init] The requested module 'file://D:/try/hello/node_modules/defu/dist/defu.mjs' does not provide an export named 'defuFn'

  import defu, { defuFn } from 'D:/try/hello/node_modules/defu/dist/defu.mjs';
  ^^^^^^
  SyntaxError: The requested module 'D:/try/hello/node_modules/defu/dist/defu.mjs' does not provide an export named 'defuFn'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

$ npm i -D defu

$ npm run dev

$ npm i -D @nuxtjs/storybook

# Vim swap files
*.swp

+# nuxt/storybook
+.nuxt-storybook
+storybook-static

+  storybook: {
+    stories: ['~/stories/**/*.stories.js'],
+  },

import NuxtLogo from '@/components/NuxtLogo.vue'

export default {
  title: 'NuxtLogo',
  component: NuxtLogo,
}

export const Default = () => '<NuxtLogo />'

  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi generate",
    "start": "nuxi preview",
+   "storybook:run": "npx nuxt storybook",
+   "storybook:build": "npx nuxt storybook build",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
  },

$ npm i -D vue-eslint-parser

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2020,
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'eslint:recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {},
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"],
+     "#imports": [".nuxt/imports"],
+     "@nuxtjs/composition-api": [
+       "node_modules/@nuxt/bridge/dist/runtime/capi.legacy"
+     ]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

<script setup>
import { useRoute, useRouter } from '#imports'
// ...

import { defineNuxtConfig } from '@nuxt/bridge'
import colors from 'vuetify/es5/util/colors'

export default defineNuxtConfig({
  router: {
    base: '/sub/',
  },

  app: {
    buildAssetsDir: '/_nuxt/',
    baseURL: '/sub/',
  },