Separating the html, css, and js into separate files

[roblav96]

So when I started using vue, I used:
https://github.com/vuejs/vue-browserify-example
as my foundation. What I loved about it is that I could have all my js, css, and html files separated so I could use my pretty formatters in sublime. I tried using vueify, but my pretty formatters did not comply with all different types of languages in one file.

How would I go about using vueify to achieve this? Thank you!!!

[yyx990803]

If syntax highlighting is your only issue, you can use https://github.com/vuejs/vue-syntax-highlight

[roblav96]

I did see that, but I really like how everything is separated into their own files. No worries!

[yyx990803]

Or you can do it like this:

<style src="./style.css"></style>
<template src="./template.html"></template>
<script>
...
</script>

[jiananshi]

Still you couldn't separate js files from template, or this is also one of vue's design concepts?

[yyx990803]

You can use src for js too

[jiananshi]

webpack would alert error: Module build failed: Error: [vue-loader] src import is only supported for <template> and <style> tags.

below is my code:

<template>
  ...
</template>

<script src="./list.js"></script>

my vuejs version: 1.0.12

[yyx990803]

It will be supported in the next release.
On Sun, Dec 20, 2015 at 10:59 PM klam notifications@github.com wrote:

webpack would alert error: Module build failed: Error: [vue-loader] src
import is only supported for and <style> tags.

below is my code:

... <script src="./list.js"></script>

my vuejs version: 1.0.12

—
Reply to this email directly or view it on GitHub
#35 (comment).

[roblav96]

sweet!

[pksunkara]

The following is a feedback which I hear from a lot of users.

with their custom .vue extensions, are a pain to work with in my text editor.

Syntax highlighting is not the only issue. People use a lot other plugins like snippets, linters etc.. when working on their code.

I have a proposal for this. Let's say I have a component called App.vue. Instead of writing the .vue file, I write the following three files:

App.vue.js
App.vue.css
App.vue.html

When building, these 3 can be automatically built into App.vue. For other languages, we can have similarly App.vue.less, App.vue.coffee, App.vue.jade.

I know we can do something like this with what @yyx990803 mentioned in #35 (comment), but if we are doing this for every .vue file we have, I think we can make the .vue file completely optional and allow it to be implicit.

I want this to be a separate option for the people who like things to be like this. I am willing to implement this (with some initial guidance on where to start). But I would like a go ahead (and feedback) from the maintainers before I start.

Thanks.

[pksunkara]

Actually, here is my web pack plugin which does this. https://github.com/pksunkara/vue-builder-webpack-plugin

You can forget about .vue files completely and just use normal js, css, html files.

[whaaaley]

Is this still a possibility? Maybe a folder called App.vue where the contents are css/js/html files?

[dashmug]

Can I suggest that instead of using *.vue files we put the entire component inside a directory instead?

Much easier to use this way for compatibility with IDEs and tools like eslint (You can't eslint --fix *.vue files AFAIK).

[Akaryatrh]

Or you can do it like this:

<style src="./style.css"></style>
<template src="./template.html"></template>
<script>
...
</script>

Hey @yyx990803! What if I want to use scoped/module styles? Did something solved this issue with Vuejs2 + Webpack2 ?

Ok, I don't know why it didn't work initialy (probably a misconfiguration on my side or maybe an old dependency), but this simple example now just works perfectly:

<template src="./template.html"></template>
<style src="./style.css" scoped></style>
<script src="./script.js"></script>

[kristoff2016]

Release version does it possible that I can use code below ?

<style src="./style.css"></style>
<script src="./list.js"></script>

After I tried use code above it did not work for me any need code compile these ?
*Note: I added it into my index.html files from vue init webpack my-project
Thank you