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


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
  // Optionally install the BootstrapVue icon components plugin

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:

@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.


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

<!-- src/ -->
## 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:

You can find the sourcecode here: