DEV Community

Conor Sheehan
Conor Sheehan

Posted on

Add BootstrapVue to VuePress

#vue #webdev #vuepress #javascript

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
Enter fullscreen mode Exit fullscreen mode

Install BootstrapVue

Next we install BootstrapVue

yarn add bootstrap bootstrap-vue
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)