Nuxt3(RC)&Vue3 + ESLint + Chakra-ui + Storybookの環境構築

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  srcDir: 'src/',
})

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

<template>
  <div>Hello World!</div>
</template>

export { default as HelloWorld } from "./HelloWorld.vue";

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  srcDir: "src/",
  imports: {
    autoImport: false,
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          "@/*": ["src/*"],
        },
      },
    },
  },
});

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script lang="ts">
import { HelloWorld } from '@/components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div>{{ state.count }}</div>
  <button @click="increment">increment</button>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    const increment = () => {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

export { default as Counter } from "./Counter.vue";

<template>
  <div>
    <HelloWorld />
    <Counter />
  </div>
</template>

<script lang="ts">
import { HelloWorld } from '@/components/HelloWorld'
import { Counter } from '@/components/Counter'

export default {
  components: {
      HelloWorld,
      Counter
  }
}
</script>

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'plugin:@typescript-eslint/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['vue', '@typescript-eslint', '@typescript-eslint/eslint-plugin'],
  rules: {
    semi: ['error', 'never', { beforeStatementContinuationChars: 'never' }],
    quotes: ['error', 'single'],
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/script-setup-no-uses-vars': 'off'
  },
}

module.exports = {
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'all',
  bracketSpacing: true,
  arrowParens: 'avoid',
  vueIndentScriptAndStyle: false,
}

{
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.format.enable": false,
}

{
  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

  // List of extensions which should be recommended for users of this workspace.
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar"
  ],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
  "unwantedRecommendations": [],
}

import { createApp } from "vue";
import App from "./App.vue";
import ChakraUIVuePlugin, { chakra } from "@chakra-ui/vue-next";
import { domElements } from "@chakra-ui/vue-system";

const app = createApp(App);
app.use(ChakraUIVuePlugin);

domElements.forEach((tag) => {
  app.component(`chakra.${tag}`, chakra(tag));
});

app.mount("#app");

import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'
import { domElements } from '@chakra-ui/vue-system'
import { defineNuxtPlugin } from 'nuxt/app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ChakraUIVuePlugin)
  // chakra.divなどを書けるようにする
  domElements.forEach(tag => {
    nuxtApp.vueApp.component(`chakra.${tag}`, chakra(tag))
  })
})

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
})

<template>
  <CBox
    w="300px"
    font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"
  >
    <CBox w="100%" shadow="md" rounded="lg" p="5">
      <chakra.img rounded="md" w="100%" src="https://bit.ly/2k1H1t6" />
      <CFlex align="baseline" mt="2">
        <CBadge color-scheme="purple"> Plus </CBadge>
        <CText
          ml="2"
          text-transform="uppercase"
          font-size="sm"
          font-weight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </CText>
      </CFlex>
      <CText mt="2" font-size="xl" font-weight="semibold" line-height="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </CText>
      <CText mt="2"> $119/night </CText>
      <CFlex mt="2" align="center">
        <CIcon name="star" color="orange.400" />
        <CText ml="1" font-size="sm"> <b>4.84</b> (190) </CText>
      </CFlex>
    </CBox>
  </CBox>
</template>

<script>
import { CFlex, CBox, CBadge, CIcon, CText } from '@chakra-ui/vue-next'
export default {
  name: 'App',
  components: {
    CBadge,
    CBox,
    CFlex,
    CIcon,
    CText,
  },
}
</script>

export { default as SampleChakraCard } from './SampleChakraCard.vue'

<template>
  <div>
    <HelloWorld />
    <Counter />
    <SampleChakraCard />
  </div>
</template>

<script lang="ts">
import { HelloWorld } from '@/components/HelloWorld'
import { Counter } from '@/components/Counter'
import { SampleChakraCard } from '@/components/SampleChakraCard'

export default {
  components: {
    HelloWorld,
    Counter,
    SampleChakraCard,
  },
}
</script>

import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'
import { domElements } from '@chakra-ui/vue-system'
import { defineNuxtPlugin } from 'nuxt/app'

import { extendTheme } from '@/styles/chakra'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ChakraUIVuePlugin, {
     extendTheme: {
        space: {
           4: '4px'
        }
     }
  })
  domElements.forEach(tag => {
    nuxtApp.vueApp.component(`chakra.${tag}`, chakra(tag))
  })
})

import ChakraUIVuePlugin, { chakra, extendTheme } from '@chakra-ui/vue-next'
import { domElements } from '@chakra-ui/vue-system'
import { defineNuxtPlugin } from 'nuxt/app'

import { extendTheme } from '@/styles/chakra'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ChakraUIVuePlugin, {
     extendTheme: extendTheme({
        space: {
           4: '4px'
        }
     })
  })
  domElements.forEach(tag => {
    nuxtApp.vueApp.component(`chakra.${tag}`, chakra(tag))
  })
})

const color = {
  black: '#222',
  white: '#fff'
}
const customTheme = extendTheme({
  color
}, {
  ...extendTheme({}),
  color
})

<template>
  <CReset />
  <header>ここにヘッダー</header>
  <main>
    <slot />
  </main>
  <footer>ここにフッター</footer>
</template>

<script lang="ts">
import { CReset } from '@chakra-ui/vue-next'

export default {
  components: {
    CReset,
  },
}
</script>

<template>
  <BaseLayout>
    <HelloWorld />
    <Counter />
    <SampleChakraCard />
  </BaseLayout>
</template>

<script lang="ts">
import { BaseLayout } from '@/layouts/BaseLayout'
import { HelloWorld } from '@/components/HelloWorld'
import { Counter } from '@/components/Counter'
import { SampleChakraCard } from '@/components/SampleChakraCard'

export default {
  components: {
    BaseLayout,
    HelloWorld,
    Counter,
    SampleChakraCard,
  },
}
</script>

import { app } from '@storybook/vue3'
import ChakraUIVuePlugin, { chakra ,extendTheme } from '@chakra-ui/vue-next'
import { domElements } from '@chakra-ui/vue-system'

import { extendTheme } from '../src/styles/chakra'

// Chakraの登録
app.use(ChakraUIVuePlugin, {
  extendTheme: extendTheme({})
})
domElements.forEach(tag => {
  app.component(`chakra.${tag}`, chakra(tag))
})

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

import { Meta, Story } from '@storybook/vue3'
import { Counter } from '..'

export default {
  title: 'components/Counter',
  component: Counter,
} as Meta<typeof Counter>

const Template: Story<typeof Counter> = () => ({
  components: { Counter },
  template: '<Counter />',
})

export const Default = Template.bind({})
Default.storyName = 'インクリメントカウンター'

import { app } from '@storybook/vue3'
import ChakraUIVuePlugin, {
  chakra,
  extendTheme,
  CReset,
} from '@chakra-ui/vue-next'
import { domElements } from '@chakra-ui/vue-system'

// Chakraの登録
app.use(ChakraUIVuePlugin, {
  extendTheme: extendTheme({}),
})
domElements.forEach(tag => {
  app.component(`chakra.${tag}`, chakra(tag))
})

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [
  story => ({
    components: { CReset },
    template: `
      <CReset />
      <story />
    `,
  }),
]

<template>
  <chakra.div display="flex" gap="12" align-items="center">
    <chakra.p font-size="20" font-weight="bold"
      >件数: {{ state.count }}</chakra.p
    >
    <CButton
      @click="increment"
      type="button"
      mt="1"
      color="white"
      background-color="blue"
      :_hover="{}"
      :_active="{
        backgroundColor: 'blue.500',
        outline: 'none',
      }"
    >
      increment
    </CButton>
  </chakra.div>
</template>

<script lang="ts">
import { reactive } from 'vue'
import { CButton } from '@chakra-ui/vue-next'

export default {
  name: 'Counter',
  components: {
    CButton,
  },
  setup() {
    const state = reactive({ count: 0 })

    const increment = () => {
      state.count++
    }

    return {
      state,
      increment,
    }
  },
}
</script>