Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Add vue-play to a vue-cli webpack project

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..?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment