# Plugins

# Write a plugin

# Overview

exports.name = 'my-plugin'

exports.extend = api => {
  // ...
}

# Properties

# name?

• Type: String

Name your plugin to distinguish all plugins in use.

# extend

• Type: (api: PluginAPI) => void

See PluginAPI

# Use a plugin

Here an example for plugin-ssg

Install

yarn add @dvan/plugin-ssg --dev

dvan.config.js

module.exports = {
  plugins: [
    '@dvan/plugin-ssg'
  ]
}

With local plugin

module.exports = {
  plugins: [
    require('./plugins/my-plugin'),
    {
      // Also works with an object
      name: 'my-second-plugin',
      extend: api => {
        // ...
      }
    }
  ]
}

More plugins see Plugins list for now.

# Plugin API

# api.command

• Type: string

Get current command.

# api.mode

• Type: string

Get bundler mode.

# api.resolve

Resolve path from base directory.

api.resolve('pages')

# api.chainWebpack

Using webpack-chain to modify internal webpack config.

api.chainWebpack(config => {
  // `config` is a webpack-chain instance
})

# Plugins list

# SSG alpha

Static site generate

• Package: @dvan/plugin-ssg
• Command: generate

Add a new command to package.json

{
  "script": {
    "dev": "dvan dev",
    "build": "dvan build",
    "generate": "dvan generate"
  }
}

To generate static site

yarn generate

# Extra

head meta for vue-meta

<script>
export default {
  head: {
    title: 'Current page own title',
    meta: [...]
  }
}
</script>

Or you can set global meta with html field in dvan.config.js, it will be apply to all generated html files.

# PWA

Progressive web application

TODO

# Blogging

TODO