Vue-cli: Vue component template

[paulpflug]

Hi,

I'm currently thinking about building a standalone component template.
Files:

/src/comp.vue 
/dev/env.vue
/test/comp.js 
/comp.js 
/.gitignore
/.project.json
/README.md

Tasks

npm run build # uses vue-compiler to compile /src/comp.vue to /comp.js
npm run test # uses Karma to test /comp.js
npm run dev # uses vue-dev-server to serve /dev/env.vue which loads /src/comp.vue

What do you think?

I've seen, that the other templates are with html, css, es2015 and karma+jasmine.
So I would use that as well..

[yyx990803]

Cool! yeah we definitely need something like this. Looks solid to me, would be happy to provide more feedback when you get the repo up.

[paulpflug]

finally: https://github.com/paulpflug/vue-component-boilerplate

although there is still some work:

• what is so cool with babel? So much effort and I still have to use curly braces? I don't get it. I made everything with es5. But babel should work, I just don't want to learn it yet.
• the jasmine docs are confusing to put it mildly, so I created only one test case

feel free to criticize

[paulpflug]

had an idea. I added a --static option to vue-dev-server to export a static version of the wired up content of dev/.
So I can use the code I used to develop the comp as a showcase hosted on gh-pages.

maybe this should be in the template too. Seeing the component in action is important and should be supported, I think.

[paulpflug]

I'm a bit hyped about this. I figured, that I also could use the environment from dev/ to run the unit tests against. So I created karma-vue-component to load an env with only one command test/component.js#L1.

I think that's totally awesome. The env. now is used for development, testing and later on as a showcase on gh-pages.

[yyx990803]

@paulpflug I've thought about a utility like that, although it's probably better to test it as a real child component so that we can also pass props to loadComp.

[paulpflug]

yes, that is the point :smile:.
The testable component is a real child of the environment. I can have as many environments as I like. Each resembles a different use case, with different props, of course.

And those environments are served for development, for testing and for showing off.
(like your examples, but without the need for casperjs)

[paulpflug]

What we shouldn't forget:
the current template is for webpack only. If we want to support statically linking we need additionally webpack bundling within the template.

[paulpflug]

I added the bundling, but now there are 3 more files in root, which could be confusing for beginners and that is exactly what I wanted to avoid..

[yyx990803]

@paulpflug group them inside a build folder?

[paulpflug]

good idea

I'm currently thinking about the best way of building.
I think it makes sense to cover webpack and static linking (just like Vue).

I end up with four files
component.vue - the actual component
component.js - the component compiled down to es5 (so others are not forced to support the languages I used)
common.js - entry point for webpack window.componentName = require("./component.js")
bundle.js - the bundle for static linking

In principle I could move the static linking logic directly into the vue file:

component = { // component }
if (module.exports != null){
  module.exports = component
} else {
  window.componentName = component
}

Then common.js won't be necessary, but as soon as it gets a bit more complex with several vue files, this will be harder to maintain.

I'm not convinced of either solution.

Any idea?

[yyx990803]

Theoretically, only component.vue is your source file. common.js is a build wrapper. Both component.js and bundle.js are just compilation results. So you can put common.wrapper.js in the build folder, and don't even have to checkin component.js and bundle.js. For the user of your template, the only thing they need to worry about is component.vue.

[paulpflug]

Fast-forward 1 year I want to use 20 different comps all made with this template but all used other languages in their vue files - I would have to install all the loaders...
In principle I think the fewer deps (for the user) the better.

If you think that is acceptable nevertheless, I will change it..

[yyx990803]

@paulpflug I mean you will distribute the built files, but you don't need to check them into source control. So, put them in .gitignore, but include them in package.json's files field. You can simply automate the build by using npm's prepublish script so that they always get built before publishing the package.

[paulpflug]

could you point me to a place where I can read how npm publish of git repos _really_ works?

I always thought all the files need to be in source control..
Where will the bundle be hosted if not on github? Found nothing in the npm docs.

[yyx990803]

Are you talking about installing directly from github repos using npm, or just confused about how npm publish works?

The docs are at https://docs.npmjs.com/getting-started/publishing-npm-packages
Note that npm has its own .npmignore file, or you can specify the files to include in package.json's files field.

[paulpflug]

I'm confused how npm publish works :smile:
I always assumed it only links to a specific version of the files in the github repo, it never occurs to me that npm actually hosts the files.

I think this is not cleanly written down anywhere (at least I couldn't find it)

So I have a little cleaning to do to wipe all that build files from my repos >_<

[paulpflug]

I made it a proper template now, this should work: vue-cli init paulpflug/vue-component-boilerplate my-project

I could need a hand on lint settings (I don't use it cause of coffee-script)

Once this is good enough, I would be willing to transfer it..

[chrisvfritz]

Thanks for your continued work on this @paulpflug! I'll be taking a look this weekend. 😃

[chrisvfritz]

@paulpflug I like what you've been up to! 😄 I see a few areas with room for further polish, so I'll try to submit a PR this week if I find time. 😅

[paulpflug]

cool. I really appreciate that :+1:

[ispal]

What is status of this now when Vue 2.0 is around the corner?

[paulpflug]

It still need review, but I doubt it is high priority.

[paulpflug]

I see "Template & best practice for distributable component" is now on the official roadmap.
@yyx990803 let me know when I can be of any help.

[nkostadinov]

Could you recommend a good starting template for components until official one is released ? Or at least give us any directions how to modify the webpack template.

[talovicnedim]

@nkostadinov Looking for the same thing. There are so many different approaches on this topic and there's no official recommendation yet.

I think you should check vue awesome and pick one that suits you. Personally, I think vue-paginate rep looks interesting.

[egoist]

Just FYI, this is what I personally use: https://github.com/vue-land/create-vue-component

[talovicnedim]

Looks very clean and nice. Thanks!