Initiate Vue from npm

Initiate Vue from npm

John DowJohn 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

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    You are loading the app.js directly 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:

    1. Package the code using Vite or similar. See the Vite docs for details
    2. Import DataTables as a global, similar to how you are doing with Vue, rather than as a module.
    <link href="https://cdn.datatables.net/v/dt/dt-1.13.6/datatables.min.css" rel="stylesheet">
     
    <script src="https://unpkg.com/browse/datatables.net-vue3@2.1.3/dist/datatables.net-vue3.umd.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-1.13.6/datatables.min.js"></script>
    

    Allan

  • John DowJohn Dow Posts: 16Questions: 6Answers: 0

    Good article Alan, in other words this is best to use a CDN now.

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin
    Answer ✓

    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

Sign In or Register to comment.