Getting Started With Storybook for Vue
In this lesson we'll go through the process of setting up Storybook for Vue. We'll use Vue CLI to create a new Vue application and Storybook CLI to setup some initial stories and config. Storybook can help you develop UI components in an isolated area without running your full application.
Additional Resources https://medium.com/storybookjs/introducing-storybook-for-vue-940f222541c5 https://storybook.js.org/basics/guide-vue/
Instructor: [00:00] In this lesson, we are going to look at the awesome storybook library and how to integrate it with Vue. The first thing that we're going to do is we're going to create a new application. I am using the Vue CLI here. I am going to say vue-create, and I am going to say this egghead-vue-storybook.
[00:14] I am going to set a couple of defaults here. I am just going to say Babel and Eslint, and get going. Now that that's finished, I am going to cd into the directory it created for me.
[00:23] The next thing I am going to do is install the storybook CLI to go ahead and create some boilerplate stories and setup for us. I am going to go ahead and do that using npx, but you can use npm or yarn to install locally.
[00:34] I will say npx -p, and then @storybook/cli and then get storybook -f. Now that that's installing, let's go ahead and open the project and code.
[00:47] As you can see, my file tree over here, I have the normal Vue boilerplate that comes with Vue CLI. I have my source here, components, HelloWorld, and just like my App.vue, main.js. I also have some new stuff here that the storybook CLI gives us.
[01:04] We have a stories directory, and we have a storybook hidden directory here for some config stuff. At the time of this recording, the Vue loader webpack plugin that comes with storybook isn't compatible with Vue CLI 3, which is what I use to create the boilerplate Vue app here. For the time being, we need to add a webpack config file with the following code.
[01:25] The next thing that we need to do is start storybook. If we look in the package.json file, we'll see that the storybook CLI added two scripts for us -- storybook and build-storybook. We can run the storybook script to go and start the server. I'll open up terminal and say yarn storybook. Now that that's started, let's open it up to see what we have. It looks like it's working.
[01:49] As you can see on the left, there are a few stories prebuilt for us. These were added by the storybook CLI in order to help for starting point. Let's make some changes to the welcome story here and see what happens.
[01:59] I am going to go back to my code and open the welcome story, which I am already on. Close that. Let's go and just add some text here. Let's say Egghead, save it. Go back to Chrome and refresh. There you have it.
[02:13] That's about all. There's a setup storybook with Vue. I'd highly recommend checking out their docs for some of the config options that can me made.