Currently utilizing VITE v5.0.8.
This file is dex.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869884">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Vue To Do App</title>
</head>
<body>
<div id="app" class="col-md-6">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script type="module" src="/src/maindex.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f243a2438">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
This pertains to the maindex.js File
import './assets/main.css'
import appdex from './components/appdex.vue';
const app = Vue.createApp(appdex)
app.mount('#app')
The contents of the appdex.vue file are as follows:
<template>
<div id="app" class="col-md-6">
<input v-model="value">
{{ value }}
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
}
</script>
I anticipate that when typing in the textbox, the value variable will update simultaneously.
A warning message present in the browser reads: [Vue warn]: withDirectives can only be used inside render functions.
This marks my introduction to Stack Overflow and my recent venture into learning Javascript and Vue Js. Please bear with me for any potential mistakes in presenting my inquiries.
An issue mirroring mine was discovered at this link
The suggested solution is as follows:
Add this to hello-app/vue.config.js, see #1503 for details
config.resolve.alias.set('vue$', resolve(__dirname, 'node_modules/vue'))However, given that I am using VITE, the node_modules/vue directory does not seem applicable as it is absent within my project structure.