Getting Started

Adding Vue to Your Project

You can add Vue to your project using a CDN script tag

Setting up an App Instance

You need to start by creating a new Vue App instance in your script tag.

let app = new Vue({
    el: '#vueApp', //This is the main Vue instance element id
    data() {
        return {} //This is where your global variables go
    },
    methods: {}, //This is where your global methods go
    computed: {}, //This is where you can have computed logic, meaning any value you need that relies on a variable
    watch: {}, //This is where you can watch variables and run logic on variable updates
    mounted() {} //You put methdos you want to mount to the global instance here
});

Attaching the Vue App instance to your html

<body>
    <div id="vueApp"> <!-- This is the element that is referenced by your Vue app, anything outside of this div will not be read as Vue code -->
        
    </div>
</body>

Last modified: 24 November 2023

Getting Started

Adding Vue to Your Project

Setting up an App Instance

Note: I recommend having only one of these per project.

Attaching the Vue App instance to your html