Add vue-play to a vue-cli webpack project

play-webpack.md

Introduction

Here are the steps I used to add vue-play to my vue-cli webpack project. These instructions assume a directory structure like this:

.
├── build
└── src
    ├── components
    └── play
        └── scenarios

If your structure differs, simply alter the paths as necessary in the steps below.

Step 1: Add vue-play

npm i -D vue-play

Step 2: Add a play script

Add the following to your package.json. PORT is the port vue-play will listen on - change as needed for your environment.

"scripts": {
  ...
  "play": "PORT=5000 VUE_PLAY=1 node build/dev-server.js",
  ...
},

Step 3: Add play index

src/play/index.js will initialize the scenarios and perform any other global setup, similar to src/main.js. My src/play/index.js looks like:

// Import global css
import 'css';

// Add scenarios
const load = requireContext => requireContext.keys().map(requireContext);
load(require.context('./scenarios', true, /.js$/));

Note you may need to alter the regular expression for your scenario files based on their names and locations.

Step 4: Add app and preview

src/play/app.js should look like:

import app from 'vue-play/app';

app();

src/play/preview.js should look like:

import preview from 'vue-play/preview';
import '.';

preview();

Step 5: Add webpack config

build/webpack.play.conf.js will load your dev config and modify it with settings for vue-play. I've found this to be the least invasive way of altering the existing build process.

const merge = require('webpack-merge');
const devWebpackConfig = require('./webpack.dev.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const playConfig = merge(devWebpackConfig, {
  entry: {
    app: './src/play/app.js',
    preview: './src/play/preview.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      chunks: ['app'],
    }),
    new HtmlWebpackPlugin({
      filename: 'preview.html',
      template: 'index.html',
      chunks: ['preview'],
    }),
  ],
});

Object.keys(playConfig.entry).forEach((name) => {
  playConfig.entry[name] = ['./build/dev-client'].concat(playConfig.entry[name]);
});

module.exports = playConfig;

Step 6: Modify dev-server

In order for the build process to know which config to choose (dev or play) you'll need to modify this line in build/dev-server.js:

var webpackConfig = require('./webpack.dev.conf')

and replace it with:

var webpackConfig = process.env.VUE_PLAY ?
  require('./webpack.play.conf') :
  require('./webpack.dev.conf');

This reads the VUE_PLAY environment variable we set in our package.json script to determine which config file to use.

Step 7: Add scenarios and play

Finally, we'll add a scenario - this example will be src/play/scenarios/FancyButton.js:

import { play } from 'vue-play';
import FancyButton from 'components/FancyButton';

play('FancyButton')
  .add('default', h => h(FancyButton));

When you're ready, you can npm run play and browse your components.

I have import some global stylus css in my App.vue
and now I want to import it into vue play.
but I have some css/file path problem (example: style: background: url('xxx'))
It seems like the paths in my project & vue play webpack are different.
I made a test(test.stylus) which I use in my project & vue play:

body {
  // the path project works
  background-image: url('./assets/logo.png')
  // the path vue play works
  // background-image: url('../../assets/logo.png')
}

Can you help me solve this or give me some examples with global stylus which have paths to external files..?