Vue.js use given html data

Question

I am new to Vue and want to change my project from mostly jQuery to Vue. Now I struggle with my navigation. Currently I am using twig in order to render my links + paths (symfony routing).

//Code simplified
<nav>
      <ul>
          <li><a href="{{ path('app_home') }}">{{ 'home'|trans }}</a></li>
          <li><a href="{{ path('app_logout') }}">{{ 'logout'|trans }}</a></li>
      </ul>
</nav>

Now I need a way to get those elements and create a navigation with vue (vue is also used for the templating).

I currently have following code:

//app.js
import Vue from 'vue';
import App from './components/App';

new Vue({
    render: h => h(App)
}).$mount('#app'); //div#app is the wrapper with everything else inside



//App.vue
<template>
    <SideNav></SideNav>
    //Add more components - content etc
</template>

<script>
    import SideNav from "./SideNav";

    export default {
        name: "App",
        components: {
            SideNav
        }
    };
</script>



//SideNav.vue
<template>
    <custom-nav>
        <custom-link></custom-link>
        <custom-link></custom-link>
    </custom-nav>
</template>

<script>
    import { custom-nav, custom-link } from '/*library with templates - already exists*/'
    export default {
        el: '#side-nav',
        name: "SideNav"
    };
</script>

What's the best way to achieve this? I want to keep using symfony translations & routing.

Does this answer your question? [Conflict on Template of Twig and Vue.js](https://stackoverflow.com/questions/31480612/conflict-on-template-of-twig-and-vue-js) — RWAM, Mar 04 '20 at 13:23
@RWAM no, I am trying to get the rendered twig-data (html) iniside my vue and reuse them to build a navigation — Syllz, Mar 04 '20 at 13:26

AppyGG · Answer 1 · 2020-03-04T14:55:08.357

You can use the application/json to pass data to your VueJS while keeping a good Content-Type semantic :

// Twig template
//...
 <script id="twig-data" type="application/json">{{yourdata|json_encode}}<script>
//...

// VueJS
//...
 export default {
    el: '#side-nav',
    name: "SideNav",
    data() {
        return {
            twigData: null
        }
    }
    created(){
        this.twigData = JSON.parse(document.getElementById('twig-data').innerHTML);
    }
 };
//...

Vue.js use given html data

1 Answers1