You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Vue is one of the 3 most popular frontend frameworks nowadays, between React and Angular.
NetBeams 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. 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:

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

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, if it is HTML. Otherwise it should be Jade syntax.

<script> is the element where the component logic is inside. Like creating the component, manipulation data, 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 an 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 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, JavaScript and CSS. And also we will still have a html icon because the mimetype is _text/html_. Each vue file should have there 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