npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-scriptx

v0.2.7

Published

VueScriptX brings back the <script> tag to your Vue projects!

Downloads

3,223

Readme

VueScriptX - Asynchrounous Script Loading for Vue

Licence

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).