-
Notifications
You must be signed in to change notification settings - Fork 152
Separating the html, css, and js into separate files #35
Comments
If syntax highlighting is your only issue, you can use https://github.com/vuejs/vue-syntax-highlight |
I did see that, but I really like how everything is separated into their own files. No worries! |
Or you can do it like this: <style src="./style.css"></style>
<template src="./template.html"></template>
<script>
...
</script> |
Still you couldn't separate js files from template, or this is also one of vue's design concepts? |
You can use src for js too |
webpack would alert error: below is my code: <template>
...
</template>
<script src="./list.js"></script> my vuejs version: |
It will be supported in the next release.
|
sweet! |
The following is a feedback which I hear from a lot of users.
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
When building, these 3 can be automatically built into I know we can do something like this with what @yyx990803 mentioned in #35 (comment), but if we are doing this for every 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. |
Actually, here is my web pack plugin which does this. https://github.com/pksunkara/vue-builder-webpack-plugin You can forget about |
Is this still a possibility? Maybe a folder called |
Can I suggest that instead of using Much easier to use this way for compatibility with IDEs and tools like |
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:
|
Release version does it possible that I can use code below ?
After I tried use code above it did not work for me any need code compile these ? |
@kristoff2016 I'm not sure to understand what you really did, but those tags must reside on a |
@Akaryatrh How you load your css file and js in main app ? |
@kristoff2016 For any further question, I'd encourage you to visit https://forum.vuejs.org |
I could not load my file css as usually inside index.html |
Installed a new version of vue-cli v2.9.1 Trying to separate html from Did not render |
@pksunkara kudos for the webpack plugin: works like a charm, very handy to automate project's scaffolding ;) Using: |
My javascript code is getting too long. with require() maybe, export default or. I'm confused about the syntax. |
Can we add seperation for concern for old vanilla guys like us who are still using below code never works even if html is loaded on contect chnage error popups. `Vue.use(Framework7Vue, Framework7); // Create Component for About page // Create Component for Login page new Vue({
}); `
|
Is there any example which uses separate js/css/html files (without any plugin)? I find this |
@ramsrib I found a way to do it using require.js and its plugin text.js. You can see an example here: |
Could we reference an external typescript file like <script lang="ts" src="./App.ts" />? |
Which is the best practice? |
inner template tag could not use src attribute, only the root template tag can use src attribute |
A lot of nice ideas. I tried a lot of solutions myself. |
@yyx990803
|
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!!!
The text was updated successfully, but these errors were encountered: