This spec is for VueJS lower version 3. In general most of the concepts are the same but there are some differences between those versions. So at the implementation we need to check the version of vue to handle some code parts differently.


Vue is one of the 3 most popular frontend frameworks nowadays, between React and Angular.
NetBeans needs support for Vue files (*.vue) called single file components.

Structure of a *.vue file:

In general it is similar to an HTML file.
It has 3 sections in it:

  • template part (could be HTML (default) or Jade)
  • code part (could be JavaScript (default), TypeScript or CoffeeScript)
  • style part (could be css (default), less, sass, scss, stylus or postcss)


example with HTML, JS, CSS:

<template>
   <!-- HINT: Template is the root element, inside of it, it is only one element allowed (vuejs 2 specific). If you need more than one, you need a wrapper -->
   <div>{{ greeting }} World!</div>
</template>

<!-- if it is JavaScript, lang attribute is optional -->
<script lang="js">
export default {
    data: function() {
        return {
            greeting: 'Hello'
        }
    }    
}
</script>

<!-- If it is CSS, lang attribute is optional -->
<style lang="css" scoped>
body {
    ...
}
</style>


<template> - is the root HTML element here. It is a must have inside a *.vue file. Everything else is inside of it. Just to make sure, there must only be one nested element allowed inside.

If you have several children like the following example:

Wrong (This works just fine for Vue 3):

<template>
   <div>Test1</div>
   <div>Test2</div>
</template>


You need to create a wrapper around it. Because it is not allowed to have multiple root elements inside of the template tag.

Correct (Mandatory for Vue 2, optional for Vue 3) :

<template>
    <div>
        <div>Test1</div>
        <div>Test2</div>
    </div>
</template>



Everything else should work like inside of a normal HTML file. Code completion, syntax highlighting, hints, fixes, etc. Whatever works for a normal HTML file, should work in a *.vue file, if it is HTML. Otherwise it should be Jade syntax.

<script> is the element defining the component logic inside. Like creating the component, data manipulation, etc. Default is JavaScript. If you need another language inside, you need to use the attribute lang with either js, ts or coffee. If you choose one of those values, immediately everything should work as for normal *.js, *.ts or *.coffee  files, including syntax highlighting, error checking, code completion, hints, fixes, etc. Also like in a normal HTML file for the embedded languages.

<style> is the element where the component style is inside. It also has an extra attribute called scoped that means, that each style like for normal tags (h1, p, div, etc.) will be prepanded with a random ID and will not affect elements out of this component. The default is CSS, if you want to use any other styling than CSS, please use the lang attribute with sass, scss, less, postcss or stylus. css in the lang attribute is also still possible. If you choose one of those values, immediately everything should work as for normal *.sass, *.scss, *.less, *.postcss, *.stylus or *.css files, including syntax highlighting, error checking, code completion, hints, fixes, etc. Also like in a normal HTML file for the embedded languages.

For a detailed/advanced spec for a Vue component, please have a look here: https://vue-loader-v14.vuejs.org/en/start/spec.html mine is based on it and only shows some examples.

Yes, it is still possible to treat Vue as HTML files (as also written in the documentation), but this works only if I do not use any pre processors or other languages than HTML, JavaScript and CSS. And also we will still have an HTML icon because the mimetype is _text/html_. Each *.vue file should have their own mimetype (text/x-vue) + the specific vue icon (https://banner2.cleanpng.com/20180714/qtv/kisspng-vue-js-javascript-library-github-freezing-point-5b498c734bc759.6608720315315467393104.jpg).

  • No labels