reactivity frameworks without webpack

[Costas]

(2020) React without build tools
https://blog.jim-nielsen.com/2020/react-without-build-tools/

(2021) petite-vue
https://vuejs.org/guide/extras/ways-of-using-vue.html#standalone-script

(2022) Vue without build tools
https://devpress.csdn.net/vue/62f420b3c6770329307f96a7.html

(2023) Vue no build tools
https://michaelcurrin.github.io/code-cookbook/recipes/javascript/packages/vue/no-build-step.html

(2023) Preact - 3kb React alternative
https://preactjs.com/guide/v10/getting-started#no-build-tools-route

(2023) React without buildsteps (use of babelJS 540kb)
https://github.com/sonyarianto/react-without-buildsteps

(2023) React components on a single HTML page
https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda

(2023) Vue Official Guide
https://vuejs.org/guide/quick-start.html
https://vuejs.org/guide/quick-start.html#using-vue-from-cdn
https://vuejs.org/guide/best-practices/production-deployment.html#without-build-tools

---

In case of Vue without build tools there are 2 ways :

• Global Build - use of unpkg.com/browse/vue/dist/vue.global.js OR grab the latest version using unpkg.com/vue@next
• ES module - use of unpkg.com/browse/vue/dist/vue.esm-browser.js OR import maps

ref - Vue - Without Build Tools | Which dist file to use? | (old) Explanation of Different Builds

Due to security reasons, ES modules can only work over the http:// protocol, cannot work over the file:// protocol.

When no build tools, Single-File Component (also known as *.vue files, abbreviated as SFC) are not supported by Vue.

alternatively, we can use 2 (3rd party) libraries :

• vue3-sfc-loader - supports <script setup>
• vue-import - does not support <script setup>

<script setup> block is executed during the component initialization phase. The flow is <script setup> >> beforeCreate >> beforeMount

• webpack using vue-loader [github]

integrate vue-route on vue project without build tools

get it by unpkg.com/browse/vue-router/dist/​

when adding the vue-router to project, broke. Cause is that has reference to vue/devtools by default..​

Solution : edit the vue-router.esm-browser.js search for devto and delete any reference found (import & functions).​

integrate vuetify on vue project without build tools

get latest JS & CSS & materialdesignicons (css + woff2)​

ref - https://vuetifyjs.com/en/getting-started/installation/#using-cdn​

​

integrate bootstrap-vue on vue project without build tools

get latest JS & bootstrap CSS​

​

• Vue - devtools
• Vue - Beyond the Web
• Vuew - built-ins
• VSCode - Volar - Language support for Vue 3
  • octref - Vetur