V Vant Docs

Tutorial: Build Plugins

Extend Vant with custom plugins

What

Plugins extend Vant with:

Create Plugin

Structure

plugins/
└── my-plugin/
    ├── index.js
    └── package.json

index.js

module.exports = {
    name: 'my-plugin',
    version: '1.0.0',
    
    // Tools
    tools: {
        my_tool: async (args) => {
            return { result: args.value * 2 };
        }
    },
    
    // Islands
    islands: {
        my_island: async () => {
            return await brain.get('skills', 'my-skill');
        }
    },
    
    // Hooks
    hooks: {
        onInit: async () => {
            console.log('Plugin loaded');
        }
    }
};

Register

const vant = require('vant');
const plugin = require('./plugins/my-plugin');

vant.use(plugin);

Use Plugin

vant.use(plugin) wires the plugin’s tools and islands into the runtime at init. List registered islands at runtime:

vant islands list

Share

Publish to npm:

npm publish

Install in a project, then register it as above:

npm install vant-my-plugin

Examples

More

See Islands and Runtime.