Hacker News Reader

Comment by petepete | Hacker News Reader

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.

View on HN

https://vuejs.org/v2/guide/single-file-components.html#What-...

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

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?

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.

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.

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.ht...

https://github.com/arijs/VueGenerator

I do it like this: 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.

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

Reply on news.ycombinator.com