[Vuejs]-How to Bind/Replace Existing Data in HTML with Vue

by

0👍

You probably want to fill the initial data of your components from the script tag, using the data from your backend.

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '[% example_var; %]' // <<< your template renderer engine tags
  }
})
</script>

However, in my understanding, the best practice to do what you want to do, would be using a store (vuex). Have the store load the initial values from your backend and your components rendering the data from this store.

Now, if you need those values printed within the html tags from the backend for SEO purposes, then you are looking for Server Side Rendering using Vue as a template rendering engine (mind that Vue uses the browser’s DOM to come up with an html output). In this case, you will need to intercept all http requests to your server, run a virtual browser’s DOM server side to make it render your components with the desired data, grab the HTML output of the DOM and pass it as the response of the request.

If you want to save some gray hairs, I would suggest you having a look at Nuxt.js since these guys did an amazing job creating a SSR engine for Vue.

👤tin

Leave a comment