https://github.com/tofu-xx/setupin

Vue SFC? HTML! <script setup> in html
https://github.com/tofu-xx/setupin

html setup-script sfc vue-cdn vue3

Last synced: 11 months ago
JSON representation

Vue SFC? HTML! <script setup> in html

• Host: GitHub
• URL: https://github.com/tofu-xx/setupin
• Owner: Tofu-Xx
• License: mit
• Created: 2024-09-03T08:46:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-20T20:42:41.000Z (over 1 year ago)
• Last Synced: 2024-11-24T20:53:45.038Z (over 1 year ago)
• Topics: html, setup-script, sfc, vue-cdn, vue3
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/setupin
• Size: 1.77 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  English | 简体中文







  

  

  



## 😏 What is a setupin?

**setupin** allows you to use [Vue SFC](https://vuejs.org/api/sfc-spec) syntax in HTML.

Using the [sfc2esm](../../../sfc2esm), which compiled at runtime for esm vue code format, and dynamic execution.

## 🤯 Code comparison

esm.html


vue **esm** is complicated to write

```html

  

  

  esm

  

    button {

      font-size: larger;

    }

  

  


    {{ count }}

  


  

    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')

  

```

setup.vue


vue **sfc** needs to be compiled

```html

  import { ref } from 'vue'

  const count = ref(0)

  {{ count }}

  button {

    font-size: larger;

  }

```

setupin.html


**setupin** brings it all together

```html

  

  

  setupin

  

  import { ref } from 'vue'

  const count = ref(0)

  {{ count }}

  button {

    font-size: larger;

  }

```

It's exactly the same as Vue SFC except for the \

## 🤓 Characteristics

- [x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)

- [x] [sfc css features](https://vuejs.org/api/sfc-css-features.html)

- [x] [Options API](https://vuejs.org/guide/introduction.html#options-api)

## 🤔 Why setupin

1. **Easy to learn**

  Offer a friendly environment for beginners to easily grasp the core usage of Vue.

2. **Simple development**

  Provide a convenient way to rapidly develop small webpage without complex configurations.

3. **Quick experience**

  Allow users to quickly experiment with Vue's new features in HTML and feel its charm.

## 😝 Playground

try it on

[stackblitz](https://stackblitz.com/edit/setupin?file=index.html)

!

## 🥰 Usage

```html

```