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

[Akaryatrh]

@kristoff2016 I'm not sure to understand what you really did, but those tags must reside on a .vue file in order to be processed properly.

[kristoff2016]

@Akaryatrh How you load your css file and js in main app ?

[Akaryatrh]

@kristoff2016 For any further question, I'd encourage you to visit https://forum.vuejs.org

[kristoff2016]

I could not load my file css as usually inside index.html
<style src="./style.css" scoped></style> it does not work for me

[anisimovyuriy]

Installed a new version of vue-cli v2.9.1

Trying to separate html from .vue template in .vue file:
<template src="./helloworld.html"></template>

Did not render helloworld.html at all and no errors were shown.
I'd appreciate any help thanks!

[antonio-rodrigues]

@pksunkara kudos for the webpack plugin: works like a charm, very handy to automate project's scaffolding ;)

Using:
vue-cli: 2.9.1
vue: 2.5.4
vue-template-compiler: 2.5.4
vue-builder-webpack-plugin: 0.3.1
vue-loader: 12.2.2 (vue-builder-webpack-plugin failed with v12.1x and v3.x.x)

[slavensaka]

My javascript code is getting too long.
Is there any way to split the js functions i have in chart.js into multiple files and include it in

<script src='../../chart.js'></script>

with require() maybe, export default or. I'm confused about the syntax.

[siddmegadeth]

Can we add seperation for concern for old vanilla guys like us who are still using
js,css and html downloaded as a zip from respective sites.
ali want is to have seperation of concern. i am against uing vue.js and we have our build tool so cannot use something else.
if this continues to be the case we have to drop vue.js due to lack of support.
we respect the creators but we just dont agree.

below code never works even if html is loaded on contect chnage error popups.

`Vue.use(Framework7Vue, Framework7);

// Create Component for About page
Vue.component('page-about', {
template: 'Login'
});

// Create Component for Login page
Vue.component('page-login', {
template: fetch('components/login.html')
});

new Vue({
// App Root Element
el: '#app',
// Init Framework7. All Framework7 parameters should be passed in "framework7" property, e.g.:
framework7: {
// Array with app routes
routes: [{
path: '/about/',
component: 'page-about'
},
{
path: '/login/',
component: 'page-login'
}
],
// App Name
name: 'reiseNow',
// App id
id: 'reisenow.com.app',
// Enable swipe panel
panel: {
swipe: 'left',
},
// ...
},
// App root data
data: {
// ....
},
// App root methods
methods: {

    onF7Ready(f7) {
        // do some f7 related logic
        f7.dialog.alert('App initialized');
    }

    // ....
}

});

`

And the error that comes up

TypeError: Cannot read property 'componentInstance' of null
at f (vue.min.js:6)
at s (vue.min.js:6)
at vue.min.js:6
at a (vue.min.js:6)
at v (vue.min.js:6)
at g (vue.min.js:6)
at _ (vue.min.js:6)
at a.patch (vue.min.js:6)
at a.t._update (vue.min.js:6)
at a.r (vue.min.js:6)
K @ vue.min.js:6
z @ vue.min.js:6
V @ vue.min.js:6
(anonymous) @ vue.min.js:6
J @ vue.min.js:6
Promise resolved (async)
kr @ vue.min.js:6
q @ vue.min.js:6
(anonymous) @ vue.min.js:6
Kr.update @ vue.min.js:6
vr.notify @ vue.min.js:6
(anonymous) @ vue.min.js:6
pageComponentLoader @ framework7-vue.js:109
load @ framework7.js:6040
(anonymous) @ framework7.js:6122
navigate @ framework7.js:6120
(anonymous) @ framework7.js:8463
(anonymous) @ framework7.js:2921
(anonymous) @ framework7.js:2920
Framework7Class.emit @ framework7.js:2914
O @ framework7.js:4215
(anonymous) @ framework7.js:4221
(anonymous) @ framework7.js:3948
(anonymous) @ framework7.js:2921
(anonymous) @ framework7.js:2920
Framework7Class.emit @ framework7.js:2914
O @ framework7.js:4215
z @ framework7.js:4230

[ramsrib]

Is there any example which uses separate js/css/html files (without any plugin)?

I find this Single File Components with Typescript is annoying, vscode couldn't recognize typescript inside .vue file properly.

[brunopistone]

@ramsrib I found a way to do it using require.js and its plugin text.js. You can see an example here:
https://github.com/bp91/vue-separated-html-without-webpack

[sandangel]

Could we reference an external typescript file like

<script lang="ts" src="./App.ts" />?

[stripathix]

Which is the best practice?
a) Have html, css and js inside single .vue file as a single file component
or
b) Have different html, js, css and .vue file and user src="" to link those files

[lovetingyuan]

inner template tag could not use src attribute, only the root template tag can use src attribute

[Rouche]

A lot of nice ideas. I tried a lot of solutions myself.
I went the loader way, not perfect. But getting there.
Note this is very experimental.
https://github.com/Rouche/vue-ts-template

[lilianjin]

@yyx990803
您好！
请教, 使用vue-loader
product.vue
vue <teamplate src="./product.html"></template> <script src="./product.js"></script>
product.html
html <div v-for="item in products"> <li> {{ item.name }}</li> </div>
- 我现在的需求是把li标签分离出来li.html

PS: 在大比较复杂的html 中进行拆分是有必要的。在某些情况我们并不需要开发一个vue组件，而是单纯的引入局部html即可。