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.

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