How to use Vue.js in an external js file

Question

Why is it that I can't get a basic hello world to print using Vue when I put it in an external js file, yet when I put it in the html file surrounded by a script tag, it works fine

When I copy and paste the contents of the that script tag inside a file called js_vue.js it doesn't work at all

I'm new to learning Vue so I don't tell get what's going on here. Surely there's a way to put all my js code in a separate file like I would with raw html and jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue"></script>
    <script src="js_vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>


</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

As a Snippet:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

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

<div id="app">
  {{ message }}
</div>

What are your exact files, what are the exact file names, what are their exact contents, and what error messages are you getting? What you have described right now doesn't quite make enough sense to answer. The code you have in your question should work (and does if you make it a snippet). — zero298, Jun 25 '19 at 16:24
may be your external script is executing before the DOM is ready. try adding your script tag at the end of the body tag — Ja9ad335h, Jun 25 '19 at 16:25
I think I know the issue. Move the `` to the **very bottom** of your `` tag. The script must run after the other elements in the DOM are available. Otherwise, wrap the contents of the script in a `document.addEventListener("DOMContentLoaded", fuction(){ // All your script contents});` so that it will execute after the DOM is done loading. — zero298, Jun 25 '19 at 16:28
the js file literally just has that code snippet place in there at the top, like how you put variables outside functions to make them global — Michael DiPaolo, Jun 25 '19 at 16:30
@MichaelDiPaolo Right, don't put it at the top. You are trying to run the JS before the DOM is loaded. You are telling Vue to use the element "app" before that element has even been created. Read the question I linked. — zero298, Jun 25 '19 at 16:32

Sabee · Answer 1 · 2019-06-25T16:40:26.810

Vue and Jquery not using the same way or idea to creating dynamics element. Jquery using selectors for access the elements, Vue uses templates for making real dynamic elements. What you are searching for is a vue templating. When the template saved into a file you have to import it to your component, and put into components. Check this vue structure

import Hello form ./folder/another/Hello.vue

...
componets:{
   Hello
}

Also solution when you write small component in script tags. Check it on this example

Example

<template id="create-template">
  ....
</template>

Vue.component('create-post', {
  template: '#create-template'
})

How to use Vue.js in an external js file

1 Answers1