How to integrate my Bootstrap Template to vue.js

Question

I am new to Vue js. i want to integrate my existing Bootstrap Template to vue js.

I have installed Vue js 2 with CLI with Webpack.

inside src folder i have below structure.

assets
components
router
App.vue
main.js

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import AppContainer from '@/components/AppContainer'
import Contact from '@/components/Contact'
import About from '@/components/About'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'AppContainer',
      component: AppContainer,
      children: [
        {
          path: '/about',
          alias: '',
          component: About,
          name: 'About',
          meta: {description: 'Overview of environment'}
        }, 
        {
          path: '/contact',
          alias: '',
          component: Contact,
          name: 'Contact',
          meta: {description: 'Overview of environment'}
        },
      ]
    }
  ]
})

App.vue

<template>
  <div id="app">
    <!-- <router-link :to="{ name: 'About' }">About</router-link>
    <router-link to="/contact">Contact</router-link> -->
    
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

component/AppContainer.vue


<template>
    <div class="full">
        <h1> Container </h1>
        <Navigation> </Navigation>
    </div>
</template>

<script>
    import Navigation from '@/components/Navigation'
    
    export default {
        name: 'full',
        components: {
            Navigation,
          
        },
        data () {
            return {
            nav: Navigation.items
            }
        },
        computed: {
            name () {
            return this.$route.name
            },
            list () {
            return this.$route.matched
            }
        }
}
</script>
</script>

component/Navigation.vue


<style>

</style>

<template>
  <div id="app-layout">
      <router-link to="/about"> About </router-link>
      <router-link to="/contact"> Contact </router-link>
       
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      nav: 'This is nav'
    }
  }
}
</script>

And in Contact and About component having simple vie. But when try to rout id does not work.

Please guide me if i am doing it wrong way.

Thanks in advance.

Try adding mode: 'history', before the routes: [ ... ]. If this don't work, I recommend you to try first with the relative path (delete the @ that some times is the cause of this kind of problems). If then it works, you know that the @ is not detected correctly. — JP. Aulet

TJ Weems TJ Weems · Accepted Answer · 2019-03-07T19:31:23

If your About and Contact routes are children of the AppContainer you need to place a <router-view></router-view> in your AppContainer

Like this AppContainer.vue

<template>
    <div class="full">
        <h1> Container </h1>
        <Navigation> </Navigation>

        <router-view></router-view>

   </div>
</template>

<script>
    import Navigation from '@/components/Navigation'

    export default {
        name: 'full',
        components: {
            Navigation,

        },
        data () {
            return {
            nav: Navigation.items
            }
        },
        computed: {
            name () {
            return this.$route.name
            },
            list () {
            return this.$route.matched
            }
        }
}
</script>

How to integrate my Bootstrap Template to vue.js

1 Answers