I am a Vue newbie looking to transition my project from mostly jQuery to Vue. Currently, I am facing challenges with my navigation as I use `twig` for rendering links and paths through 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 to figure out how to integrate these elements into a navigation using Vue, which is also handling templating in the project.
Here is the current code snippet:
//app.js
import Vue from 'vue';
import App from './components/App';
new Vue({
render: h => h(App)
}).$mount('#app'); //div#app acts as the wrapper for everything else
//App.vue
<template>
<SideNav></SideNav>
//Add more components like 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 would be the most effective approach to achieve this? I aim to continue leveraging symfony translations and routing in the process.