Split template, script and styles (HTML, JS and CSS) in nuxt.js component files

Question

What is the best way to split nuxt.js views, components (and layouts) into separate files (at design time, not after build)? With complex and large views and components I find it extremely annoying when I need to switch between template and script (to look something up, etc.).

Ideally, I would be able to define:

- foo.vue.html
- foo.vue.js
- foo.vue.css

and let the build/generate process do the rest. I am using generation of prerendered SPAs (nuxt generate) so the solution, if there is one, would have to be compatible.

tony19 · Accepted Answer · 2022-07-15 21:05:36Z

9

You need to do it somewhat manually like described in vue docs

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

edited Jul 15, 2022 at 21:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2018 at 20:16

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Split template, script and styles (HTML, JS and CSS) in nuxt.js component files

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related