Page History

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

...

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:

<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 vue file should have there own mimetype  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).