feat(components/card): create

.gitignore

@@ -1,3 +1,5 @@
+.nuxt-storybook
+storybook-static
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
 # Logs

components/Card.stories.js

@@ -0,0 +1,6 @@
+export default {
+  title: 'Card',
+}
+
+export const DefaultCard = () =>
+  `<card style="width: 400px" cover="https://www.muji.com/public/media/jp/img/visual/6699316/aboutryohin_02_201221_thumb_thumb.jpg" title="良品計画サイト" description="サステナピリティ">`

components/Card.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="rounded border shadow w-auto">
+    <figure>
+      <img :src="cover" :alt="description" />
+    </figure>
+
+    <div class="p-4">
+      <div v-if="title" class="text-black text-opacity-50">{{ title }}</div>
+      <div v-if="description" class="text-sm">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    cover: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {},
+})
+</script>

nuxt.config.js

@@ -32,7 +32,9 @@ export default {
     'nuxt-windicss',
     '@nuxtjs/composition-api',
   ],
-
+  storybook: {
+    // Options
+  },
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios

package.json

@@ -7,6 +7,7 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
+    "storybook": "nuxt storybook",
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
     "lint": "yarn lint:js && yarn lint:style",
@@ -38,6 +39,7 @@
     "@nuxt/typescript-build": "^2.0.4",
     "@nuxtjs/eslint-config-typescript": "^5.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/storybook": "^3.3.1",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@vue/test-utils": "^1.1.2",
     "babel-core": "7.0.0-bridge.0",
@@ -59,6 +61,7 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
     "vue-jest": "^3.0.4"
   },
   "config": {