Page History

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.
NetBeams needs support for Vue files NetBeans needs support for Vue files (*.vue) called single file components.

Structure of a *.vue file:

...

<template>
   <!-- HINT: Template is the root element, inside of it, it is only one element allowed. If you need more than one, you need a wrapper  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  greeting }} World World!</div>
</template>

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

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

<template> - is the root HTML element here. It is a must have inside a *. It is a must have inside a vue filevue 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 multple root elements inside of the template tag 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 should work in a *.vue file, if it is HTML. Otherwise it should be Jade syntax.

<script> is the element where the component logic is inside is the element defining the component logic inside. Like creating the component,  manipulation datadata 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  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 an random ID and will not affect elements out of this component will be prepanded with a random ID and will not affect elements out of this component. The Default is CSS 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 or , *.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 not use any pre processors or other languages than HTML 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 a html icon because the mimetype is  And also we will still have an HTML icon because the mimetype is _text/html_. Each *. Each vue file should have there own mimetype 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).