plang:vuej3:v3howto:step1 [Calax.com

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

=== Create a Vue App ===
  * create a constant which contains the app or apps 
  * Pass in the **options object**  which contains all the elements of the app (e.g. data)
  * Add a data function which contains what you will manage in the app
    * data items are properties of the app and return objects
    * don't forget **dbl curly brackets** are need in the html to reference the data properties or run valid javascript e.g. <code>{{ name }}</code>

In standard JS:
<code>const app = Vue.createApp({
    data: function() {
        return {
           name: 'Justin'
      }
     }
})</code>

In ES6 (use arrow functions)
<code>const app = Vue.createApp({
    data() {
        return {
           name: 'Justin'
      }
     }
});</code>

  * Once created, in your html : mount the app from your Vue file
    * The object doing the mounting is the name from the js file
    * The #id is the id of the DOM component that you wish to connect the app element to

<code>
<script>
const mountedApp = app.mount('#app')
</script>
</code>