[Vuejs]-Vue not defined error and not sure what is going wrong with my code

by

0👍

✅

When using a full-fledge scaffolded out project the createApp() function is called in the main.js file. This file is known as the entry point. Below is a general layout of the App.vue, Form.vue, and main.js (or .ts if using TypeScript).

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

// this may need to be #main depending on what's in your index.html file
createApp(App).mount('#app') 

// App.vue
<script setup>
import Form from './components/Form.vue'
</script>

<template>
  <header>
  </header>
  <main>
    <!-- <TheWelcome /> -->
    <Form />
  </main>
</template>
<style>
</style>

// Form.vue
<script>
export default {
    data() {
        return {
            name: '',
            price: '',
            facilities: [
                {
                    name: 'Ballroom',
                    price: 5000,
                    active: true
                }, {
                    name: 'Backyard',
                    price: 400,
                    active: false
                }, {
                    name: 'Wellness Area',
                    price: 250,
                    active: false
                }, {
                    name: 'Restaurant',
                    price: 220,
                    active: false
                }
            ]
        }
    },
    methods: {
        toggleActive: function (s) {
            s.active = !s.active;
        },
        // method to calculate the total amount
        total: function () {
            // ...
        },
        // method to format as currency
        formatCurrency(value) {
            // ...
        }
    }
}
</script>
<style></style>

Leave a comment