Initiate Vue from npm
Initiate Vue from npm
John Dow
Posts: 16Questions: 6Answers: 0
I have a simple application of two files
package.json
"type": "module",
"devDependencies": {
"nodemon": "^3.0.1"
},
"dependencies": {
"datatables.net-dt": "^1.13.6",
"datatables.net-vue3": "^2.1.3",
"ejs": "^3.1.9",
"express": "^4.18.2"
}
index.ejs
<!DOCTYPE html>
<html lang="en">
<head id="vueHead">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>{{ title }}</title>
</head>
<body>
<div class="container" id="vueBody">
<div class="card">
<h1>{{ h1 }}</h1>
<DataTable class="display">
<thead>
<tr>
<th>First</th>
<th>Second</th>
</tr>
</thead>
</DataTable>
</div>
</div>
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script src="app.js" type="module"></script>
</body>
</html>
app.js
import DataTable from 'datatables.net-vue3'
import DataTablesCore from 'datatables.net-dt'
DataTable.use(DataTablesCore)
const body = {
data() {
return {
h1: 'Its black site',
}
},
}
const head = {
data() {
return {
title: 'Its black site',
}
},
}
Vue.createApp(body).mount('#vueBody')
Vue.createApp(head).mount('#vueHead')
In Google Chrome i have the error in Console JS
black.uc.domain.com/:1 Uncaught TypeError: Failed to resolve module specifier "datatables.net-vue3". Relative references must start with either "/", "./", or "../".
The table is not generated. What am I doing wrong?What am I doing wrong?
This question has an accepted answers - jump to answer
Answers
You are loading the
app.jsdirectly into the browser? You aren't "compiling" it using a bundler such as WebPack, Vite or ESBuild? If so, then you need to tell your browser where the modules you are trying to import from are. That can be done with an Import Map - I wrote a detailed blog post about that.The two other options you have are:
Allan
Good article Alan, in other words this is best to use a CDN now.
You need to get the code onto the client-side somehow. Using our CDN is one option. The other is to package the files and deliver them from your own server.
Allan