Definitely not clickbait. Here’s how it works:

Compile the VUe3 component into a Web Component and use it in your React project. And then I also tried vUE nested vUE, and after a bit of messing around, it worked. There are pictures and there are images.

precondition

Vue uses 3.2 + because there is an API in VUE called defineCustomElement that compiles Vue components into Web Components. Well, the article is written here, you go to try, almost get!

Use the tailwind+vue class to develop web Components

Whether it is traditional VUE or React, TAILwind can greatly improve the development experience and speed. Windicss also supports attribute writing with similar functions and syntax. The comparison is as follows:

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>
Copy the code

Attribute writing:

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>
Copy the code

You can write styles without leaving HTML, greatly extending the life of the mouse wheel. However, neither Tailwind nor Windicss can embed CSS in Web Componts, so you can use less/ SCSS instead. After some research, I found a big guy wrote, UNOCSS, support to embed CSS in vue style tag. Then apply the web Component conversion rules in Vue 3.2 to convert *.vue to *.ce.vue. To convert CSS to true · Inline CSS does not disappear with Web Components. After compiling, it looks like this:

// The original file must end with ce!<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button type="button" @click="count++"
    text="sm white"
    font="mono light"
    p="y-2 x-4"
    border="2 rounded blue-200"
  >Count is: {{count}}</button>
</template>
Copy the code

Vue nested vue

Direct nesting must be directly GG, needless to say, CSS variables all disappear, this example can illustrate this point.

The code is as follows:

<script setup lang="ts">
    import test1Vue from './test1.ce.vue';
</script>

<template>
    <div>Use *.vue directly:<test1Vue></test1Vue>
    </div>
    <div>Use {{\ "" < - compnent - 1 / l \ >"}}<l-compnent-1 />
    </div>
</template>
Copy the code

If 1.vue1 is to be written to 2.vue, you can only register 1.vue as web Components. CustomElements. Define (‘ l – compnent – 1 ‘, 1. Vue).

Scope of application

Write a component library in a vue that can be easily used in other frameworks such as React,Angular, and Svelte.