Advanced Usage

🚀 Unlock the full potential of Vant with these powerful techniques and best practices!

Intro

Through this chapter, you can learn about some advanced usages of Vant! 💡 Discover professional techniques for component registration, browser adaptation, and optimization strategies that will take your mobile development skills to the next level. Perfect for developers who want to master every aspect of Vant!

Component Usage

Component Registration - Multiple Ways to Get Started! 📦

Vant supports multiple ways to register components, giving you the flexibility to choose the approach that best fits your project structure and performance needs!

Global Registration 🌍

Register components globally to use them anywhere in your app without importing them in every component!

import { Button } from 'vant';
import { createApp } from 'vue';

const app = createApp();

// Method 1. via app.use
app.use(Button);

// Method 2. Register via app.component
app.component(Button.name, Button);

Full Registration ⚡

You can also globally register all Vant components at once for maximum convenience:

import Vant from 'vant';
import { createApp } from 'vue';

const app = createApp();

app.use(Vant);

// The Lazyload directive needs to be registered separately
app.use(vant.Lazyload);

Note: Registering all components will introduce the code of all components, leading to larger bundle size.

Local Registration 🎯

Perfect for tree-shaking and when you only need specific components in certain parts of your app!

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

For more information, please refer to Vue.js - Component Registration。

<script setup> ✨

Vant components can be used directly in <script setup> without component registration - the modern Vue way!

<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>

JSX/TSX 🔧

Vant components can be used directly in JSX and TSX without component registration - perfect for React-style development!

import { Button } from 'vant';

export default {
  render() {
    return <Button />;
  },
};

Browser Adaptation - Make Your App Work Everywhere! 🌐

Viewport Units 📱

Vant uses px unit by default, but you can use tools such as postcss-px-to-viewport to transform px unit to viewport units (vw, vh, vmin, vmax) for perfect responsive design!

PostCSS Config

PostCSS config example for seamless viewport adaptation:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Rem Unit 📏

You can use tools such as postcss-pxtorem to transform px unit to rem unit for scalable and accessible designs!

• postcss-pxtorem
• lib-flexible

PostCSS Config

PostCSS config example:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

Custom rootValue 🎨

If the size of the design draft is 750 or other sizes, you can adjust the rootValue to match your design specifications perfectly:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem version >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

Adapt to PC Browsers 💻

Vant is a mobile-first component library, but if you want to use Vant in PC browsers, you can use the @vant/touch-emulator module! This amazing module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser, making your mobile components work seamlessly on desktop!

# Install
npm i @vant/touch-emulator -S

// Just import this module, then Vant works in PC browser
import '@vant/touch-emulator';

Related Docs

Explore more resources to master Vant development:

• Quick Start - Get started with Vant in minutes
• ConfigProvider - Learn about global configuration and theming
• Locale - Master internationalization and localization
• Style Guide - Understand Vant's design principles and styling
• FAQ - Find answers to common questions and issues
• Vant 4 Overview - Explore all Vant 4 features and components
• Vant 3 Migration - Learn about migrating from older versions
• Component Registration - Vue.js official documentation
• PostCSS px-to-viewport - Viewport unit conversion tool
• PostCSS pxtorem - Rem unit conversion tool