Utilize a locally stored VueJs file rather than importing it from an external source

Question

Utilize a locally stored VueJs file rather than importing it from an external source

Starting my journey with VueJs using single file application has been quite interesting.

Initially, I had everything in a single html page with both javascript and CSS styles embedded within it.

To avoid fetching VueJs features online, I downloaded the Vue.JS file and linked it directly in the HTML file by including:

<head>
...
<script src="vue.js"
...
</head>

This simple step allowed me to incorporate a <script>...</script> tag in my HTML file, enabling recognition of Vue.

It worked seamlessly.

Now, I wish to organize the code into separate files:

HTML file
JS file
CSS file

However, I am now faced with a dilemma on what to include in the <head> section of my HTML file. I need to import my file.js with my code, while also running my local Vue.js file instead of relying on the web version.

How should I proceed?

I attempted the following approach, which unfortunately did not work:

<head>
<title>First Vue playground</title>
    <link rel="stylesheet" href="style.css">
    <!-- Below is my JS code-->
    <script src="appJS.js"></script> 
   <!-- below is my vue.js file so it runs Vue locally instead of importing it-->
   <scrip src="vue.js"></scrip>
</head>

As a beginner in this realm, any assistance would be greatly appreciated.

Thank you all in advance.

javascript vue.js

Answer 1

Answer №1

If you plan on utilizing Vue within the file appJS.js, make sure to import vue.js before your file. Below is an example of how your files should be structured:

App.js

window.onload = function () {
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue'
        }
    });
}

Index.html

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/vue.js"></script>
<script src="./scripts/app.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  <p>{{ message }}</p>
</div>

</body>
</html>

Answer 2

If you plan on utilizing Vue within the file appJS.js, make sure to import vue.js before your file. Below is an example of how your files should be structured:

App.js

window.onload = function () {
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue'
        }
    });
}

Index.html

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/vue.js"></script>
<script src="./scripts/app.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  <p>{{ message }}</p>
</div>

</body>
</html>

Utilize a locally stored VueJs file rather than importing it from an external source

Answer №1

Similar questions

In order to streamline our production environment, I must deactivate Vue.js devtools, while ensuring they remain active during development mode

JavaScript Accordion malfunctioning

The CanJS model is unable to retrieve data from a .json file

Creating a 2D array matrix in JavaScript using a for loop and seamlessly continuing the number count onto the next row

How can we effectively share code between server-side and client-side in Isomorphic ReactJS applications?

Issues with Vue Router functionality in Leaflet Popup are causing unexpected behavior

jQuery: Track mouse movement with a delay

Eliminate items from one array when there is a corresponding match in a separate array using JavaScript

Issue with jQuery validation plugin is that the select element is not being properly validated

Resize an image to fit perfectly within a material-ui grid

Adjust the jQuery resizable handlers on the fly

Discovering the Vertical Dimension of a Web Page Displayed in a Window

Rendering HTML is not supported by AngularJS on Android 19 with version 4.4.4 and Safari 8.0.5

The method .depth() does not exist within this context

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

Turning Vue Table Headers into Clickable Links

Refresh a selection menu using a checkmark

How can jQuery be utilized to dynamically update the text in a navbar?

Struggling with developing a straightforward application with Angular-Material

An inquiry regarding props in JavaScript with ReactJS