Add Bootstrap Vue To Vuepress ← Back to projects

Categories: blog
Tags: devto

Create a VuePress project

The first thing we need to do is create a new VuePress project. It’s really easy with the latest version of npm or yarn. From the VuePress docs

yarn create vuepress-site $optionalDirectoryName

Install BootstrapVue

Next we install BootstrapVue

yarn add bootstrap bootstrap-vue

Configuration

Now we need to import BootstrapVue in .vuepress/enhanceApp.js, where we have access to the vue instance.

// .vuepress/enhanceApp.js
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

export default ({ Vue, options, router, siteData }) => {
  // Make BootstrapVue available throughout your project
  Vue.use(BootstrapVue);
  // Optionally install the BootstrapVue icon components plugin
  Vue.use(IconsPlugin);
}

Finally we need to load the bootstrap css. VuePress ships with stylus by default now, but we can still import css into our stylus file at .vuepress/styles/index.styl

/**
 * Custom Styles here.
 *
 * ref：https://v1.vuepress.vuejs.org/config/#index-styl
 */

@require '~bootstrap/dist/css/bootstrap.css'
@require '~bootstrap-vue/dist/bootstrap-vue.css'

That’s it! Now you can use BootstrapVue components in your VuePress app.

Example

Vuepress lets you embed components directly in markdown, so you can do something like this

<!-- src/index.md -->
## Hi from bootstrap-vue
<b-button>Hello world!</b-button>

Here’s an example app I’ve deployed to netlify which uses various BootstrapVue components including b-carousel and b-table: https://conorscocktails.netlify.app/

You can find the sourcecode here: https://github.com/ConorSheehan1/conors-cocktails