The cause of

On the weekend, I was woken up by my friend, who told me, “Do you know that our open source project has been named by Yuxi, the father of Vue?” . I knead to rub blurred medium sleep eye, this is I do open source a year in hear the most trick…. Do not make, the same joke opened too many times is not funny…… Until I saw these two pictures

WTF? , Varlet unexpectedly appeared in the speech of THE University of Utah, what is this dream? So sweet? I watched the video with my friend’s guidance, and Uvu said Varlet was “pretty good,” which was really flattering. The author thinks Varlet is definitely not worthy to be placed with the mountains above, and although Utah only mentions a few words, we are encouraged that it is one of the most pleasant things to happen in recent times (because THE author has always considered Eubrook his technical hero, even though he doesn’t know anything about Vue, which is hilarious).

On that day, UVU shared some progress related to Vue3 ecology recently, recommended some mature tools, and shared the future outlook. Let a person harvest quite a lot, because of time reason especially big also can’t explain all the ecology in detail, mostly is to grasp the key to speak a few words.

This sharing has been carried out both at home and abroad. The conference in China was held in a small station. As a big iron fan, I was completely unaware of it, which was indeed a little ashamed. Of course, it must be because the author is focused on work and open source (start making excuses like crazy….).

According to UVU, the ecosystem of Vue3 is now thriving, especially in terms of component libraries, where high-quality component libraries are springing up, thanks to the concerted efforts of the open source world over the past year.

As the author of Varlet, I also want to take the initiative to share or promote what we have and hope that those who are interested can join us. For the record: pure love, no profit, not belonging to any company, not responsible for any interest party, only responsible for the project itself, and we are devout to technology.

Basic introduction

Varlet Github warehouse support we click a star good Chinese document English document

The UI component library starts with the UI

As you can see, this is a Material style mobile UI component library, based on Vue3 development, what TS support, internationalization, theme customization, on-demand introduction, component library should have some basic functions, I don’t need to describe, watch a little interesting.

Vscode plug-in document explorer

You will get this plugin when you search varlet-vscode-extension in the vscode plugin market, install it

If you don’t know the component’s API, place your mouse over the component……

Click to view the document and a default browser will pop up:……

Automatically jump to the corresponding chapter, copy and paste, at one go, everything is so natural, I feel very practical.

Automatic component import

Unplugin-vue-components is a cross-webpack, Vite, rollup plug-in developed by Antfu Daishen, author of Vue Use, the core team of Vite

It can scan the components you use in templates and automatically load them for you on demand, and it can read the type information of your components and provide it to Volar for template type inference. It is very powerful. Varlet and this plug-in also work together at the code level. Unplugin-vue-components first side supports Varlet, and requires only the following simple configuration, so you don’t care about the problems introduced by the component

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()],
        dts: true}}})]Copy the code

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()],
      dts: true,})]})Copy the code

Local scope custom themes

Varlet provides a variety of style variables for each component to modify, and also provides a StyleProvider component that can easily achieve local scope theme customization. I like the world colorful……

<div class="container">
  <var-rate :model-value="5"/>
  <var-rate :model-value="5"/>
  <var-rate :model-value="5"/>

  <var-style-provider :style-vars="{'--rate-primary-color': '#59a379'}">
    <var-rate :model-value="5"/>
    <var-rate :model-value="5"/>
    <var-rate :model-value="5"/>
  </var-style-provider>
</div>
Copy the code

Compound component

We’ve focused on mobile, but we’ve also invested in tablets and desktops. For example, we have Table and Pagination components that help you expand on other platforms, especially tablets.

You can even turn on certain modes for a better user experience. Pagination, for example, has two modes that can be adapted to different platforms, and there will be more complex components of this type in the future

As you can see, we make different designs for different platforms, but we don’t give users a variety of styles, so as not to make it difficult for users to choose. We look for styles that are appropriate for different platforms.

Component library molding tool

Maybe you want to say, I don’t like your designs, I have my own ideas…… Varlet has packaged all the development tools into a Cli tool, which contains all the tools to build open source component library, not only limited to mobile component library development, and has detailed documentation, you can also go up, maybe the next dark horse is you!

yarn global add @varlet/cli
varlet-cli gen my-ui
Copy the code

Support TSX and VUE file two styles of development, choose which you like, install dependencies, a component library project initialization completed, the next is your performance.

Type hinting

We fully embrace the direction of Vue3 ecology, so there’s also pretty good support for TS type hints, where you can export all the component types for type gymnastics. And we’ve optimized both vscode and webstorm’s development experience.

If you are a vscode user, you will also get type hints in the template after installing volar

If you are a WebStorm user, you don’t need to install anything, we have a complete attribute description for it

The last

Thanks to U again for pushing us forward, and thanks to our friends in the Nuggets for supporting us. The author is really very happy and feels energetic again. In addition, we are planning the theme design of The Dark mode. Interested partners can participate and contribute to the ecological construction of Vue3.

At the same time, you can also make some friends who have common interests. The author can tell you what to do if he doesn’t know what to do. The author and his friends who don’t know how to do it are also willing to hand over your friend to teach them. We are not linked with any interest parties, we are only willing to be responsible for their own projects, power is not strong, the level is limited. The only way to support us is to give us a star or make sure that what we are doing is meaningful, which we love to see.