Vuepress

Installation

yarn global --dev add vuepress@next

@next specifies the new version. As-of January 2019, it refers to 1.x version which is still is alpha stage. If more convenient, vuepress can globally be installed.

Scripts

  "scripts": {
    "serve": "vuepress dev --port 3000",
    "build": "vuepress build"
  }

• Running on port 3000 to align with other serve
• With yarn you can omit run with both scripts. Respectively yarn serve and yarn build

Theme

Start a custom theme by creating a .vuepress/theme/Layout.vue file. As Convention is over configuration, the main layout file must be named Layout.vue. If you are using SCSS, do not forget to yarn add --dev sass-loader.

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about.html">About</router-link>
    </nav>

    <main>
      <Content/>
    </main>
  </div>
</template>

<style lang="scss" scoped>
</style>

Cool things:

• It’s a Vue component! Design your layout with a standard SFC (Single File Component)
• Altough it looks a bit hacky, you can use Bootstrap-Vue with:

  <script>
    import Vue from "vue";
    import BootstrapVue from "bootstrap-vue";
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
  
    Vue.use(BootstrapVue);
  
    export default {};
  </script>
  

  in your Layout.vue

Sources: