{"id":23144275,"url":"https://github.com/tofu-xx/setupin","last_synced_at":"2025-07-16T22:36:35.337Z","repository":{"id":255442017,"uuid":"851520514","full_name":"Tofu-Xx/setupin","owner":"Tofu-Xx","description":"Vue SFC? HTML! \u003cscript setup\u003e in html","archived":false,"fork":false,"pushed_at":"2024-11-20T20:42:41.000Z","size":1852,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-24T20:53:45.038Z","etag":null,"topics":["html","setup-script","sfc","vue-cdn","vue3"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/setupin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tofu-Xx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-03T08:46:41.000Z","updated_at":"2024-11-20T20:42:45.000Z","dependencies_parsed_at":"2024-09-15T17:57:25.164Z","dependency_job_id":"10368e15-48ce-498d-b894-0670cd52e4a6","html_url":"https://github.com/Tofu-Xx/setupin","commit_stats":null,"previous_names":["tofu-xx/setupin"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tofu-Xx%2Fsetupin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tofu-Xx%2Fsetupin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tofu-Xx%2Fsetupin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tofu-Xx%2Fsetupin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tofu-Xx","download_url":"https://codeload.github.com/Tofu-Xx/setupin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230136054,"owners_count":18178814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","setup-script","sfc","vue-cdn","vue3"],"created_at":"2024-12-17T15:15:39.464Z","updated_at":"2024-12-17T15:15:40.099Z","avatar_url":"https://github.com/Tofu-Xx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"right\"\u003e\n  \u003cb\u003eEnglish\u003c/b\u003e | \u003ca href=\"./README.zh-CN.md\"\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./public/logo.svg\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://stackblitz.com/edit/setupin\"\u003e\u003cimg src=\"https://img.shields.io/badge/stackBlitz-blue\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/setupin\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/setupin?color=orange\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/setupin\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/setupin\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 😏 What is a setupin?\n\n**setupin** allows you to use [Vue SFC](https://vuejs.org/api/sfc-spec) syntax in HTML.\n\nUsing the [sfc2esm](../../../sfc2esm), which compiled at runtime for esm vue code format, and dynamic execution.\n\n## 🤯 Code comparison\n\n\u003ch4 align=center\u003eesm.html\u003c/h4\u003e\n\nvue **esm** is complicated to write\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eesm\u003c/title\u003e\n  \u003cstyle\u003e\n    button {\n      font-size: larger;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton @click=\"count++\"\u003e{{ count }}\u003c/button\u003e\n  \u003c/div\u003e\n\n  \u003cscript type=\"module\"\u003e\n    import { createApp, defineComponent, ref } from 'https://unpkg.com/vue/dist/vue.esm-browser.js';\n    const App = defineComponent(() =\u003e {\n      const count = ref(0);\n      return {\n        count\n      };\n    });\n    createApp(App).mount('#app')\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003ch4 align=center\u003esetup.vue\u003c/h4\u003e\n\nvue **sfc** needs to be compiled\n\n```html\n\u003cscript setup\u003e\n  import { ref } from 'vue'\n  const count = ref(0)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"count++\"\u003e{{ count }}\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  button {\n    font-size: larger;\n  }\n\u003c/style\u003e\n```\n\n\u003ch4 align=center\u003esetupin.html\u003c/h4\u003e\n\n**setupin** brings it all together\n\n```html\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003esetupin\u003c/title\u003e\n  \u003cscript src=\"https://unpkg.com/setupin\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cscript setup\u003e\n  import { ref } from 'vue'\n  const count = ref(0)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"count++\"\u003e{{ count }}\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  button {\n    font-size: larger;\n  }\n\u003c/style\u003e\n```\n\nIt's exactly the same as Vue SFC except for the \\\u003chead\u003e\n\n## 🤓 Characteristics\n\n- [x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)\n- [x] [sfc css features](https://vuejs.org/api/sfc-css-features.html)\n- [x] [Options API](https://vuejs.org/guide/introduction.html#options-api)\n\n## 🤔 Why setupin\n\n1. **Easy to learn**\n  Offer a friendly environment for beginners to easily grasp the core usage of Vue.\n2. **Simple development**\n  Provide a convenient way to rapidly develop small webpage without complex configurations.\n3. **Quick experience**\n  Allow users to quickly experiment with Vue's new features in HTML and feel its charm.\n\n## 😝 Playground\n\ntry it on\n[stackblitz](https://stackblitz.com/edit/setupin?file=index.html)\n!\n\n## 🥰 Usage\n\n```html\n\u003c!-- The default is the dev version --\u003e\n\u003cscript src=\"https://unpkg.com/setupin\"\u003e\u003c/script\u003e\n\n\u003c!-- dev --\u003e\n\u003cscript src=\"https://unpkg.com/setupin/dist/main.js\"\u003e\u003c/script\u003e\n\n\u003c!-- prod --\u003e\n\u003cscript src=\"https://unpkg.com/setupin/dist/main.prod.js\"\u003e\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftofu-xx%2Fsetupin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftofu-xx%2Fsetupin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftofu-xx%2Fsetupin/lists"}