vue-script2
Fully restores the <script>
tag to front-end single-page-app (SPA) frameworks! This version is for Vue.js, but it's easy to port to Riot.js and others.
It's meant for internal use, not for standalone components that are being shared publicly. Those should be "self-contained" and come with all the JS they need.
Features
- Just like
<script>
except with a 2
!1 - Keep your
app.js
bundle small! - Embrace Web Standards™ everyone knows and loves!
- Easy for web designers to pick up! If you know HTML, you already know how to use it!
- Tiny! Only 996 bytes! (min+gzip'd)
- Perfect for use in
.ejs
templates or .html
files! - No more including every library on every page!
- No more complicated "code splitting" nonsense!
- Ordered execution based on position in markup!
- Special
unload
attribute can be used to keep your app's memory usage low!
Installation
npm install vue-script2 --save
Then enable the plugin (in your main.js
or wherever):
Vue.use(require('vue-script2'))
Usage
Simple, Traditional, Asynchronous Loading of Scripts
Using vue-script2
with vue-router
is simple. Say that only one of your routes displays a "page" that makes use of jQuery. Well, no need to include all of jQuery in your app.js
bundle, now you can throw this in:
<script2 src="/path/to/jquery.min.js"></script2>
Boom!
And don't worry, script2
won't double-load a file if it's already loaded!
Delayed Execution of Inlined JavaScript
Want to run some JavaScript only when a certain "page"/route is loaded?
<script2 src="/path/to/jquery.min.js"></script2>
<script2>
// Ordered execution should ensure that '$' is available here
$(document).ready(function () {
// this code runs *only* when the route
// that contains this code is loaded! :D->-<
})
</script2>
Cleaning Up Resources On Route Change
The unload
attribute accepts JS expressions to run when the component is destroyed. This prevents your SPA from accumulating stuff in memory that's not being used:
<script2 src="/path/to/jquery.min.js" unload="jQuery.noConflict(true)"></script2>
TODO
License
MIT
1 If you don't like the 2
at the end, feel free to petition your favorite SPA framework to stop breaking the HTML standard! :smile: