Storybook (Vue) で Vuetifyを使う

wrote: 2019.1.16

install vuetify

vue add vuetify

install storybook

npx -p @storybook/cli sb init

config

.storybook/config.jsに以下を追加

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.css";

Vue.use(Vuetify, {
  iconfont: "md"
});

addDecorator(() => ({
  template: "<v-app><story/></v-app>"
}));

configは以下のようになる。

.storybook/config.js

import { configure, addDecorator } from "@storybook/vue";
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.css";

Vue.use(Vuetify, {
  iconfont: "md"
});

addDecorator(() => ({
  template: "<v-app><story/></v-app>"
}));

// automatically import all files ending in *.stories.js
const req = require.context("../stories", true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

yarn add stylus
yarn add stylus-loader

preview-head.html

  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

参考

Vue + Vuetify theme not working · Issue #4256 · storybooks/storybook

Quick Start — Vuetify.js