Is there any (simple) way to pass variable from Express to Vue.js?

Question

Ok, so I'm just starting to learn Vue.js, and man, it's so hard to do things that are very simple when just using EJS for example. I'm close to abandon Vue for my current project, since I just don't know how to pass res.locals.something from Express server to Vue frontend. By the way, it's Passport.js thing - when authenticated, user should be redirected, but I have to pass the info whether user has logged in or not to Vue (res.locals.isLogged = req.isAuthenticated();), and that seems impossible with my current (close to 0) Vue.js skills... The only solution I found was using ajax (axios was my choice) request on the client side, targeting /login/facebook route on the server, and then I could pass the response from Express to Vue, but it cannot work because of the damned CORS issue. So, I cannot use ajax to retrieve the data from Express, and Express and Vue are not natively connected like Express and EJS or Pug for example.

In short - does anyone know of a simple way to pass Express variable to Vue, not including Vue SSR, Express-vue module etc.?

P.S. I'm not using Webpack or anything similar (so, no .vue files etc.) - just a simple index.html file with Vue loaded from CDN.

pilgrim011 · Accepted Answer · 2017-07-10 22:21:12Z

0

Ok, one thing that crossed my mind as dirty workaround was using .ejs instead of .html extension, so I could pass the variable to ejs, but I thought it won't work. What I did was just renaming my index.html to index.ejs, passing res.locals.isLogged to ejs template and both Vue and ejs rendered parts of the app are working together, somehow...

So, this is the dirty (sort of) solution...

answered Jul 10, 2017 at 22:21

pilgrim011

571 silver badge7 bronze badges

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

Comments

Rahul Tumpala · Accepted Answer · 2020-06-20 16:50:41Z

0

The question has already been answered but I'm not familiar with .ejs and couldn't follow the solution. For those like me, what I did was :

Sent the data using res.locals or res.render('file.pug', data)
Set the data received as a html data attribute to a tag ( ex : p(id="myParagraph" data-myData= data)
Set the state of the Vuex store using

mounted : function () {
  this.$store.state.myData = document.getElementById("myParagraph").getAttribute("data-myData");
}

The same can be used to set the data property of the vue root instance.

From here on you can use the data whenever needed and still retain reactivity.

answered Jun 20, 2020 at 16:50

Rahul Tumpala

635 bronze badges

Comments

Cisco · Accepted Answer · 2017-07-09 23:13:43Z

-2

You're on the right track using res.locals. To get access to the variable in the JS that's in the view, you have to wrap the value in a string: console.log('#{isLogged}'). See example below

app.js

const express = require('express')
const app = express()

app.set('view engine', 'pug')

app.use((req, res, next) => {
  res.locals.isLogged = false
  next()
})

app.get('/', (req, res) => {
  res.render('index')
})

app.listen(3000, () => {
  console.log('listening on 3000')
})

views/index.pug

doctype html
html
  head
    title= title
  body
    h1= text
  script.
    console.log('#{isLogged}') // false

answered Jul 9, 2017 at 23:13

Cisco

23.5k6 gold badges44 silver badges67 bronze badges

4 Comments

pilgrim011 Over a year ago

Thank you, but I'm not using pug, I'm using plain HTML file with Vue.js rendering view. It is easy with pug, ejs etc.

Cisco Over a year ago

It doesn't make a difference. You have to wrap the value in quotes as shown above.

pilgrim011 Over a year ago

If I do that, I get only "[Vue warn]: Property or method "isLogged" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>)". Console just logs the string "isLogged", not the value(false).

pilgrim011 Over a year ago

Ok, one thing that crossed my mind as dirty workaround was using .ejs instead of .html extension, so I could pass the variable to ejs, but I thought it won't work. What I did was just renaming my index.html to index.ejs, passing res.locals.isLogged to ejs template and both Vue and ejs rendered parts of the app are working together, somehow... If no one comes up with a better idea, I'm gonna mark this as an answer.

Collectives™ on Stack Overflow

Is there any (simple) way to pass variable from Express to Vue.js?

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related