3 ms·

The ability to split Vue components into multiple (html, ts, scss) files in a single directory would be nice. I dislike the single file approach and it makes th

The ability to split Vue components into multiple (html, ts, scss) files in a single directory would be nice. I dislike the single file approach and it makes things like having nice syntax highlighting and completion more complex than it should be.

rhengles 8y ago
Another one here building a simple architecture to build Vue components in a folder instead of a file, you can check it out here: https://unpkg.com/@arijs/vue-generator/outra/pagina/index.html https://unpkg.com/@arijs/vue-generator/outra/pagina/index.ht... https://github.com/arijs/VueGenerator https://github.com/arijs/VueGenerator
atentaten 8y ago
https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns https://vuejs.org/v2/guide/single-file-components.html#What-...
- rhengles 8y ago
  Having to repeat the component name in the "src" is less than ideal, IMO.
jvanveen 8y ago
Using such an approach in this project: https://github.com/garage11/ca11 https://github.com/garage11/ca11 You can just use the vue template compiler for that.
jazoom 8y ago
I've been doing that for years in one of my projects. Just reference the CSS and JS files in the .vue file (e.g. <script src='./file.js'></script>) instead of inlining them in their respective tags. How else would you want to do it?
- petepete 8y ago
  I'd just like a directory containing a template, style and code file, the referencing would be straightforward to imply without having to repeat everywhere. Similar to how views work in Rails I guess.
  - jazoom 8y ago
    You want more magic, basically. I guess that's a personal choice. I've never personally felt inconvenienced by having this at the bottom of my .vue files: <style src='./style.css'></style> <script src='./script.js'></script> It's not like I ever have to type it out. It gets copied along with whatever else is in the .vue file I copied from.
hypercluster 8y ago
I do it like this: https://github.com/ktsn/vue-template-loader https://github.com/ktsn/vue-template-loader There's also a plugin for VSCode that let's you switch between Button.js and Button.html for example.

rhengles 8y ago

Another one here building a simple architecture to build Vue components in a folder instead of a file, you can check it out here: https://unpkg.com/@arijs/vue-generator/outra/pagina/index.html https://unpkg.com/@arijs/vue-generator/outra/pagina/index.ht... https://github.com/arijs/VueGenerator https://github.com/arijs/VueGenerator

atentaten 8y ago

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns https://vuejs.org/v2/guide/single-file-components.html#What-...

rhengles 8y ago
Having to repeat the component name in the "src" is less than ideal, IMO.

jvanveen 8y ago

Using such an approach in this project: https://github.com/garage11/ca11 https://github.com/garage11/ca11 You can just use the vue template compiler for that.

jazoom 8y ago

I've been doing that for years in one of my projects. Just reference the CSS and JS files in the .vue file (e.g. <script src='./file.js'></script>) instead of inlining them in their respective tags. How else would you want to do it?

petepete 8y ago
I'd just like a directory containing a template, style and code file, the referencing would be straightforward to imply without having to repeat everywhere. Similar to how views work in Rails I guess.
- jazoom 8y ago
  You want more magic, basically. I guess that's a personal choice. I've never personally felt inconvenienced by having this at the bottom of my .vue files: <style src='./style.css'></style> <script src='./script.js'></script> It's not like I ever have to type it out. It gets copied along with whatever else is in the .vue file I copied from.

hypercluster 8y ago

I do it like this: https://github.com/ktsn/vue-template-loader https://github.com/ktsn/vue-template-loader There's also a plugin for VSCode that let's you switch between Button.js and Button.html for example.