vuepress-theme-blog-vuetify

    1.6.2 • Public • Published

    vuepress-theme-blog-vuetify

    💥The world's most simple, beautiful and customizable 2 columns VuePress blog theme built with Vuetify.

    It has following features.

    • List hot tags automatically
    • List recent posts automatically
    • Scroll-spy TOC
    • SEO ready (perfect <title> and <meta> tags)
    • Mobile friendly
    • Customizable styles using scss (not stylus)
    • Ability of inserting your own content into the layout of the theme

    Live demo

    👉 https://vuepress-theme-blog-vuetify.ttskch.com/

    Installation

    $ yarn add --dev vuepress-theme-blog-vuetify
    
    # or
    $ npm install -D vuepress-theme-blog-vuetify

    Usage

    // .vuepress/config.js
    module.exports = {
      theme: 'blog-vuetify',
      themeConfig: {
        // ...
      }
    }

    Configurations

    You can see the valid options and default values here 👍

    Customizing styles

    You can customize styles flexibly by overwrite scss variables.

    In order to overwrite them, you have to just place .vuepress/styles/variables.scss which re-defines some variables like this 👍

    Inserting your own content into the layout of the theme

    You can insert your own content like as following.

    1. Create Vue component

    For example, create .vuepress/components/AfterPage.vue like following.

    <template>
      <div id="after-page">
        <p>Some content for after page content of each page</p>
      </div>
    </template>

    2. Create enhanceApp.js and register your component to Vue app

    import AfterPage from './components/AfterPage'
    
    // @see https://vuepress.vuejs.org/theme/writing-a-theme.html#app-level-enhancements
    export default ({
      Vue, // the version of Vue being used in the VuePress app
      options, // the options for the root Vue instance
      router, // the router instance for the app
      siteData // site metadata
    }) => {
      Vue.component('MyAfterPage', AfterPage)
    }

    3. Notify the name of your component to the theme

    themeConfig: {
      components: {
        afterPage: 'MyAfterPage'
      }
    }

    That's it 😃

    Default (empty) components for valid hook points are them.

    Install

    npm i vuepress-theme-blog-vuetify

    DownloadsWeekly Downloads

    19

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    704 kB

    Total Files

    47

    Last publish

    Collaborators

    • ttskch