vue.js variables is not Working With Node.js :

Question

i am trying to run vue.js code inside my node.js app , but when i run my code using node index.js in terminal i got {{ name }} in browser instead of {{ john }}

HTML:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">

<title>Document</title>
</head>


<body>

<div id="app">
    <h1>
        {{name}}
    </h1>

</div>

</body>
</html>

JavaScript:

var Vue = require('vue');
var express = require('express');
var app = express();
var http = require('http');
var server = http.Server(app);


server.listen(3000,function () {
    console.log('starting the server');
});

app.use(express.static(__dirname));

app.get('/',function (req,res) {
    res.sendFile(__dirname +  +'/index.html');
})


new Vue({
    el:'#app',
    data:{
        name:'john'
    },

})

Any Help :)

Note: i am using vue module installed from npm

Matti Price · Accepted Answer · 2018-04-24 15:53:51Z

2

Vue is a client side framework that needs to be running on the webpage you are serving, not on the node client that is serving it.

If you are trying to do server side rendering for Vue, you'll want to follow the guide for that.

https://ssr.vuejs.org/en/

answered Apr 24, 2018 at 15:53

Matti Price

3,54118 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriel Carneiro · Accepted Answer · 2018-04-24 15:54:23Z

1

You're mixing the frontend and the backend, it'll not work. The Vue is part of the front, so it needs to be imported at the index.html so there you can use the new Vue and so on. I recommend you to use the Vue-CLI to begin a project, It'll set the dependencies for you so you won't need to set a web-server manually.

answered Apr 24, 2018 at 15:54

Gabriel Carneiro

6915 silver badges18 bronze badges

Collectives™ on Stack Overflow

vue.js variables is not Working With Node.js :

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related