Nuxt.js: Separate .vue into html, js and css files

[piyushchauhan2011]

I was wondering if it's possible to have support separate files so that we can have better IDE autocompletion support for TypeScript or JS. Currently code intelligence is a problem with .vue files.

We can split the components into html, js and css by require (requiring) the html and css files - but with pages directory as it's translated to routes, I'm not sure how will the above work.

Also, having separated css and scss file means that we have to figure out how to write scoped css/scss as I'm not sure how to do it without css-modules currently.

_{This question is available on Nuxt.js community (#c696)}

[pi0]

What IDE are you currently using? In most cases it is just enough to declare parsing .vue files as .html because they have almost same syntax.

[sebastianmacias]

You could also give vetur a try

[piyushchauhan2011]

@pi0 @sebastianmacias Yup True, but when we get some autocompletion in vscode or if we change extension to .html. I was hoping if we split the files into .js or .ts we can leverage the code completion which vscode natively provides with ability to navigate around codebase and types, docs etc. Vetur looks cool but still lack some features of types and hangs sometimes while parsing files - still a good project but needs time maybe ?

[ausir0726]

I was use Yeoman for help create separate vue file.

like use yo nuxt create aaa/bbb
that will create .vue file or folder in pages aaa/bbb.vue
and add template

<template lang="pug" src="~/views/aaa/bbb.pug">
</template>
<script  src="~/controllers/aaa/bbb.js">
</script>
<style lang="stylus" src="~assets/stylus/aaa/bbb.styl">
</style>

that will separate .vue to view pug(html) , js , stylus(css)
it's help me easier lint pug and stylus

but separate can't easy manage small project , it's too cumbersome.
and if I change the pages route , pug, js , stylus files will not change at same time.
so, I no longer use this solution .

[Atinux]

HI @piyushchauhan2011

We can't really do this, you can use @ausir0726 solution to separate vue files into different files.

For information, I use VSCode and the auto-completion is fine :)

[piyushchauhan2011]

Cool, no worries 👍 @Atinux

[sebastianmacias]

@kodekrendel try dracula the theme an color palette is beautiful and easy on your eyes

[piyushchauhan2011]

I just came across two projects which separates .vue files. https://github.com/ktsn/vue-template-loader is a loader for webpack and https://github.com/Toilal/vue-webpack-template is a template for from vue webpack template supporting it.

Would be a good idea to test with Nuxt.js the loader @kodekrendel

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.