reactivity frameworks without webpack

C

Costas

Administrator
Staff member
(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.
Click to expand...

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

alternatively, we can use 2 (3rd party) libraries :
<script setup> block is executed during the component initialization phase. The flow is <script setup> >> beforeCreate >> beforeMount
Click to expand...

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)​
​
integrate bootstrap-vue on vue project without build tools
get latest JS & bootstrap CSS​
​
 
You must log in or register to reply here.
Top