Vue-cli: Support passing props to `vue serve {component}`

[brandon93s]

What problem does this feature solve?

When developing a component in isolation with cli-service-global and vue serve there is often a need to pass props to the component. This is particularly true when building a component that needs to expose a "public API" via props. Currently, to use vue serve in development, one must hard code prop values as "defaults" to pass the desired data into the component.

What does the proposed API look like?

The props could either be self-contained in a JSON file or passed via the CLI.

vue serve MyComponent.vue  sampleProps.json

vue serve MyComponent.vue  --propA="Bob" --propB=9

[yyx990803]

I don't think we should complicate the CLI with this, just make an additional wrapper, it gives you hot reload as well...

[brandon93s]

For those that find this issue via Google in the future, we settled on a pattern of using _demo_ components.

Our project is structured as follows:

Sample-Project
|-- src
|   |-- components
|   |   |-- example.vue
|   |   |-- another-example.vue
|   |   `-- ...
|   `-- views
|       |-- ...
|       `-- ...
`-- demo
    `-- components
        |-- example.vue
        |-- ...
        `-- ...

// src/components/example.vue implementation:

<template>
   <div> Hello, {{ name }}!</div>
</template>

<script>
   export default {
      props: ['name']
   }
</script>

// demo/components/example.vue implementation:

<template>
   <example :name="name" />
</template>

<script>
   import example from '@/components/example'

   export default {
      data (){
         return { name: 'Brandon' }
      },
      components: {
         example
      }
   }
</script>

We would then develop our example component in isolation with the command:

vue serve ./demo/components/example.vue

This contrived example presents as a significant amount of "wrapper" boilerplate, but for a more complicated component the wrapper is a minor addition for development convenience.

[badsprad]

+1 for having this same requirement as @brandon93s

ps: if anyone else has found a wrapper that allows you to pass props/args/flags via the CLI, then please post back here...