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

...