CODEWITHSUNDEEP
vue.jsvue-routervue-strap
Chris B.
Chris B.

Reputation: 90201

Vue router and Bootstrap

I'm using Vue with vue-router and vue-strap. I'm trying to register components from vue-strap, but the examples look like this:

var alert = require('vue-strap').alert;

new Vue({
  components: {
    alert: alert
  }
})

vue-router, on the other hand, doesn't create a Vue object.

Vue.use(VueRouter);

const router = new VueRouter({
  history: true,
  linkActiveClass : 'active'
});

router.map({
  '/': {
    component: Home
  }
});

const App = Vue.extend(Index);
router.start(App, '#root');

So how do I declare my components?

Upvotes: 0

Views: 1059

Answers (2)

masongzhi
masongzhi

Reputation: 164

you can try it instead,

import { alert } from 'vue-strap'
Vue.use(VueRouter);

const router = new VueRouter({
  history: true,
  linkActiveClass : 'active'
});

router.map({
  '/': {
    component: alert
  }
});

const App = Vue.extend(Index);
router.start(App, '#root');

Upvotes: 0

John
John

Reputation: 1123

This is my current setup in vue apps

var Vue = require('vue');
var VueRouter = require('vue-router');


// Use
Vue.use(require('vue-resource'));
Vue.use(VueRouter);


// Components
var site = Vue.component('site', require('./views/site/component.vue'));
var home = Vue.component('home', require('./views/home/component.vue'));
var search = Vue.component('search', require('./views/search/component.vue'));
var index = Vue.component('index', require('./views/index/component.vue'));

// Router
var router = new VueRouter({
    history: true
});
router.map({
    '/': {
        component: index
    },
    '/search': {
        component: search
    },
    '/profile': {
        component: home
    }
})


// Start App
router.start(site, 'body');

All 'major' components are declared globally with .component. Everything that I need at component level I declare with .extend. In vue-router, the 'site' component (in my case) acts as the $root.

Topmenu / sidebar are declared in the site component in the components section. In the 'site' template i have only and other shared components like topmenu / sidebar.

Upvotes: 1

Related Questions