Material design style mobile component library based on Vue3

In this issue, we recommend varlet-ui, a Material Design-style mobile component library based on Vue3.

Varlet is a Material-style mobile component library developed based on Vue3. It fully embraces the Vue3 ecosystem and is maintained by the component library team established by the community.

class=”pgc-h-arrow-right” data-track=”6″>

• • Provide 50 high quality common components
  • Component is very lightweight
  • Developed by Chinese people, complete Chinese and English documentation and logistics support
  • Support

on demand

• Support theme customization
• Support internationalization
• Support webstorm, vscode component attribute highlighting
• Support SSR
• Support Typescript
• Ensure 90% or more unit test coverage and provide stability assurance
• Support dark mode

class=”pgc-h-arrow-right” data-track=”20″> Install

CDN

varlet.js contains all the styles and logic of the component library.

< div id="app"> < /div> 
< script src="https://cdn.jsdelivr.net/npm/vue@next"> < /script> 
< script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"> < /script> 
< script> 
const app = Vue.createApp({
template: '< var-button> Button < /var-button> '
})
app.use(Varlet).mount('#app')
< /script> 

Webpack / Vite

# install via npm or yarn or pnpm 

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui

import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style.js'

createApp(App).use(Varlet).mount('#app')

class=”pgc-h-arrow-right” data-track=”27″>

Manually introduce

Each component is a Vue plug-in and consists of component logic and style files that are manually introduced and used as follows.

import { createApp } from 'vue'
import { Button } from '@varlet/ui'
import '@varlet/ui/es/button/style/index.js'

createApp().use(Button)

automatically introduces

All components declared in the template will be automatically scanned by the unplugin-vue-components plugin, which will automatically import the component logic and style files and register the components.

# Install plugins

# npm
npm i unplugin-vue-components -D

# yarn
yarn add unplugin-vue-components -D

# pnpm
pnpm add unplugin-vue-components -D

Vue Cli

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const { VarletUIResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VarletUIResolver()]
      })
    ]
  }
}

Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [VarletUIResolver()]
    })
  ]
})

use

After the configuration is complete, use the following

< template> 
< var-button>  < /var-button> 
< /template> 

class=”pgc-h-arrow-right” data-track=”42″>

The first side of the component library provides themes for dark mode, which has the advantage of being more readable in low light environments.

Switch topics

< var-button block @click="toggleTheme"> Switch themes < /var-button> 

import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'

export default {
  setup() {
    let currentTheme
    
    const toggleTheme = () => {
      currentTheme = currentTheme ? null : dark
      StyleProvider(currentTheme)
    }
    
    return { toggleTheme }
  }
}

Inject the text and background color variables recommended by the component library to control the overall color

body {
  transition: background-color .25s;
  color: var(--color-text);
  background-color: var(--color-body);
}

class=”pgc-h-arrow-right” data-track=”48″> base component

Button

Loading

Badge

class=”pgc-h-arrow-right” data-track=”55″> Display component

Skeleton

Progress

Steps

class=”pgc-h-arrow-right” data-track=”61″>

Tabs

IndexBar

More components can be read by yourself, component address:

https://varlet.gitee.io/varlet-ui/#/zh-CN/style-provider

—END—

Open source protocol: MIT