vue-scriptx
v0.2.7
Published
VueScriptX brings back the <script> tag to your Vue projects!
Downloads
3,223
Maintainers
Readme
VueScriptX - Asynchrounous Script Loading for Vue
VueScriptX brings back the <script>
tag to your Vue projects!
This package is inspired by vue-script2.
This tiny package should take care of all your declarative and imperative asynchronous loading needs. Nothing too complicated from what web devs already know.
This version is tailored for the Vue.js framework, but it's easy to port to others.
If you like this package, a star to the repo is nice.
Features
- Support for Vue 3 and Typescript.
- Brings back
<script>
tag to your Vue projects as<scriptx>
. - Global Vue property
$scriptx
for regular code access. - Choose asynchronous and ordered execution using
async
prop. - Prop
unload
handles callbacks after script being unmounted.
Requirements
- Vue.js >= 3.0.0
- Ecma version >= ES6
Installation
npm install vue-scriptx --save
Then enable the plugin (in your main.ts
or wherever):
import App from '../App.vue'
import ScriptX from 'vue-scriptx'
createApp(App)
.use(ScriptX)
Usage
As simple as using <scriptx>
as <script>
tags or using this.$scriptx
, below samples illustrates how to load jQuery asynchronously.
DO NOT put user provided code inside <scriptx>
or its propeties.
In Templates
By default, <scriptx>
tags are serialized using promises so that one script loads after another has finished. If you don't need ordered execution, add async
to have the script injected immediately.
The scriptx
component takes text as slot, you can still use delimiters to change the text being sent as slot.
<scriptx src="/path/to/jquery.min.js"></scriptx>
<scriptx>
$('#msg').text('Hello from VueScriptX!')
</scriptx>
Prop async
Specify if this script should load itself asynchronously (ignoring execution order of other scripts). This defaults to "false"
.
You can also mix them so that some <scriptx>
tags are loaded asynchronously while others wait for the ones before them.
<scriptx src="jquery.min.js"></scriptx>
<scriptx>$('#foo').text('hi!')</scriptx>
<!-- Load next script immediately, don't wait for jQuery -->
<scriptx src="lib.js" async></scriptx>
Prop unload
Callback being executed after the scriptx is being unmounted. Note that it takes a string containing the code.
<scriptx src="/path/to/jquery.min.js" unload="jQuery.noConflict(true)"></scriptx>
In Vue Scripts
It may not work in typescript as it may complain that $
is undefined.
this.$scriptx.load('/path/to/jquery.min.js')
.then(() => $('#msg').text('Hello from VueScriptX!'))
Contributions
Contributions are welcomed, as long as it doesn't cause any harm to any users.
Please do not submit compiled files (e.g. the dist
directory of this repo).