English | ็ฎไฝไธญๆ
setupin allows you to use Vue SFC syntax in HTML.
Using the sfc2esm, which compiled at runtime for esm vue code format, and dynamic execution.
vue esm is complicated to write
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>esm</title>
<style>
button {
font-size: larger;
}
</style>
</head>
<body>
<div id="app">
<button @click="count++">{{ count }}</button>
</div>
<script type="module">
import { createApp, defineComponent, ref } from 'https://unpkg.com/vue/dist/vue.esm-browser.js';
const App = defineComponent(() => {
const count = ref(0);
return {
count
};
});
createApp(App).mount('#app')
</script>
</body>
</html>vue sfc needs to be compiled
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
<style>
button {
font-size: larger;
}
</style>setupin brings it all together
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setupin</title>
<script src="https://unpkg.com/setupin"></script>
</head>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
<style>
button {
font-size: larger;
}
</style>It's exactly the same as Vue SFC except for the <head>
- Easy to learn Offer a friendly environment for beginners to easily grasp the core usage of Vue.
- Simple development Provide a convenient way to rapidly develop small webpage without complex configurations.
- Quick experience Allow users to quickly experiment with Vue's new features in HTML and feel its charm.
try it on stackblitz !
<!-- The default is the dev version -->
<script src="https://unpkg.com/setupin"></script>
<!-- dev -->
<script src="https://unpkg.com/setupin/dist/main.js"></script>
<!-- prod -->
<script src="https://unpkg.com/setupin/dist/main.prod.js"></script>