Why would I configure "The hard way" ?

[tfennelly]

Hi. Thanks for creating vue-play. It's awesome !!

Question (I already asked @egoist on Gitter, but I'm guessing that's not really being used) ... why would one configure things “The hard way” ala the Getting Started section in the docs ?

Why would I define a ./play/preview.js etc ? The docs explain how you'd make these configurations, but It’s not clear from the docs why you’d want to do any of that i.e. what capability it exposes etc.

I’m hoping it allows me to configure the preview in some way so I might be able to add bootstrap css etc for all stories/use-cases, but I don’t see how atm. Maybe this is something that could be added to the docs, if it's possible.

[tfennelly]

Maybe I need to work via https://github.com/vue-play/vue-play-cli and specify something special there ??

[egoist]

It's how vue-play works, all your stories are loaded by ./play/preview.js, it's just a bare minimal Vue app which creates a Vue instance using the selected story and render it. Then we use ./play/app.js which is another Vue app to select the story you wanna display. Since we don't want the css and js in ./play/preview.js to affect the our main app ./play/app.js, we load it by using an iframe.

How does preview page work

the preview (./play/preview.js) has all the stories you added, but only render the story matched the story you select in main app (./play/app.js)

So it's definitely ok to include any CSS frameworks like bootstrap in your ./play/preview.js.

btw. The main app and preview do communication by using window.postMessage

[egoist]

There's The hard way because you may want to integrate vue-play to your existing workflow, for example: you already have a webpack config for your app

[tfennelly]

@egoist thanks for the reply.

In the meantime, I just created a wrapper Page component for use solely in my vue-play stories + added a webpack.config.js for use with vue-play to get the CSS etc into the distro it uses etc.

[tfennelly]

Btw, I do think an example of how someone would redefine/override preview.js to e.g. include bootstrap CSS files etc would be useful. The current doc snippets appear to just show how to redefine them to just do what they're already doing (i.e. nothing new). I'm sure it's obvious to the well initiated (in vue, vue-play and webpack), but for someone like me that's just started using Vue, it's not so obvious.