import Vue from node_modules using a prefix

user_881712 0
Viewed 141

I'm setting up my dev environment under Ubuntu 20.04, with the following tools:

  • PhpStorm 2020.3 as IDE
  • CodeIgniter v4
  • Vue 3.x
  • Tailwind CSS+UI

I created a test project and following the docs I did:

npm install tailwindcss@latest
npm install @headlessui/vue @heroicons/vue
npm install vue@next

and the other stuff to create the skeleton of CodeIgniter project. Then I wrote a simple "Hello World" Vue application:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="output.css" type="text/css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@next"></script>
    <script type="module" src="test1.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    {{ message }}
</div>

</body>
</html>

JS

const HelloVueApp = {
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

It works! But as far as I understand this makes no sense: I used Vue.js from a CDN while I installed it locally using npm.

If I remove the <script src="https://unpkg.com/vue@next"></script> line I need to import Vue before I can use it.

It is contained under the node_modules folder. So I tried:

import Vue from "/node_modules/vue/dist/vue.cjs.js"

and also:

import Vue from "../node_modules/vue/dist/vue.cjs.js"

But in both cases it does not find the file (error 404). What is the correct syntax?

Of course the file exists, if I type this from the project's root folder:

$ ls node_modules/vue/dist/vue.cjs.js
node_modules/vue/dist/vue.cjs.js
npm vue.js phpstorm codeigniter
1 Answers

You are mixing client side javascript and server side javascript.

The node_modules directory is living in your server and thus is not available to the client, the client being who requested your initial html. When you do

<script src="https://unpkg.com/vue@next"></script>
<script type="module" src="test1.js"></script>

You are making Vue accessible to your client side js because it gets imported from https://unpkg.com/vue@next. If you want to avoid that and use your npm packages you need to use a bundler like webpack. It will look at the modules you import in the js files you wrote and prepare a new js file which will contain all the needed stuff (both your code and the vue module code).
If you set up everything correctly you should be able to end up writing a js file with:

import Vue from "vue"

const HelloVueApp = {
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

without the need for the

<script src="https://unpkg.com/vue@next"></script>

line.

user_29235260
Related