vue-scriptx

library0.2.7jsnpmunverified

VueScriptX is a small, focused Vue 3 plugin that facilitates asynchronous loading and execution of external JavaScript files and inline scripts directly within Vue components using a custom `<scriptx>` component or a global `$scriptx` property. It aims to reintroduce the familiar `<script>` tag behavior in a Vue-compatible way, inspired by `vue-script2`. The current stable version is 0.2.7, with an informal release cadence indicated by recent minor updates. Key differentiators include its declarative `<scriptx>` component for both ordered and asynchronous execution, support for unloading scripts when components unmount, and full TypeScript compatibility for Vue 3 projects, offering a straightforward and robust approach to managing third-party scripts in Single Page Applications (SPAs). It emphasizes a simple, web-standards-familiar approach to script injection.

web-framework

npm install vue-scriptx

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SCRIPTX

vue-scriptx

web-frameworkjavascriptv0.2.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ScriptX

✓ import ScriptX from 'vue-scriptx';

✗ import { ScriptX } from 'vue-scriptx';

ScriptX is the default export for plugin installation, not a named export.

$scriptx (Global Property)

✓ declare module 'vue' { interface ComponentCustomProperties { $scriptx: typeof import('vue-scriptx').ScriptXService; } }

✗ const scriptx = this.$scriptx; // Typescript will error without declaration merging

The `$scriptx` property is added to the Vue instance context. For TypeScript, explicit declaration merging is required to correctly type `this.$scriptx`.

ScriptX component in template

✓ <scriptx src="https://example.com/script.js"></scriptx>

The `<scriptx>` component is globally registered when the plugin is installed via `app.use(ScriptX)`.

This quickstart demonstrates how to install VueScriptX as a Vue plugin, and provides examples for both declarative script loading using the `<scriptx>` component in a template and programmatic script loading via the global `$scriptx` property.

import { createApp } from 'vue'; import App from './App.vue'; import ScriptX from 'vue-scriptx'; const app = createApp(App); app.use(ScriptX); app.mount('#app'); // In a Vue component (e.g., App.vue <script setup> or methods): // For template usage: // <template> // <div id="app"> // <scriptx src="https://code.jquery.com/jquery-3.7.1.min.js"></scriptx> // <scriptx>/* This script loads after jQuery */ // const msg = window.$.text('Hello from VueScriptX!'); // console.log(msg); // </scriptx> // <scriptx src="https://unpkg.com/lodash@4.17.21/lodash.min.js" async></scriptx> // </div> // </template> // For programmatic usage within a component's script: // Assuming this is inside a component's setup() or methods: // import { getCurrentInstance, onMounted } from 'vue'; // onMounted(() => { // const instance = getCurrentInstance(); // instance?.appContext.config.globalProperties.$scriptx.load('https://example.com/another-script.js') // .then(() => { // console.log('Another script loaded programmatically!'); // }) // .catch(error => { // console.error('Failed to load script:', error); // }); // });

Debug

Known issues

gotchaVueScriptX by default serializes the execution of `<scriptx>` tags, meaning one script loads and executes after the previous one completes. To load scripts in parallel (asynchronously), you must explicitly add the `async` prop to the `<scriptx>` tag.

fix

For parallel loading, use `<scriptx src="..." async></scriptx>`. For ordered execution (default), omit the `async` prop.

affects: >=0.1.0

breakingVueScriptX requires Vue.js version 3.x. It is not compatible with Vue 2 projects, as indicated by its `vue3` keyword and usage of Vue 3 composition API context.

fix

Ensure your project uses Vue 3 (`vue@^3.0.0`). For Vue 2, consider `vue-script2` (which inspired this package).

affects: <3.0.0

gotchaThe `unload` prop on `<scriptx>` components accepts a string of code to be executed when the component is unmounted. While convenient, directly embedding code strings can make debugging harder and might pose security risks if user-provided input is used.

fix

Use the `unload` prop for simple cleanup functions like `jQuery.noConflict(true)`. For complex logic, consider wrapping it in a function defined in your component's script or creating a custom directive.

affects: >=0.1.0

gotchaWhen using TypeScript, dynamically loaded scripts often introduce global variables (e.g., `$` for jQuery) that TypeScript's static analysis cannot detect. This leads to 'Property 'X' does not exist on type 'Window & typeof globalThis'.' errors.

fix

Declare the global variables in a `d.ts` file, e.g., `declare const $: any;` or `declare interface Window { $: JQuery; }`, to inform TypeScript of their existence. Be mindful of potential naming conflicts.

affects: >=0.1.0

Errors

Common errors & fixes

Property '$scriptx' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

TypeScript cannot infer the global properties added to `this` by Vue plugins without explicit declaration merging.

fix

Create a `vue-scriptx.d.ts` (or similar) file in your project with `declare module 'vue' { interface ComponentCustomProperties { $scriptx: typeof import('vue-scriptx').ScriptXService; } }` to extend the Vue instance's types.

Module 'vue-scriptx' has no exported member 'ScriptX'.

`ScriptX` is the default export of the `vue-scriptx` package for plugin installation, not a named export.

fix

Change your import statement from `import { ScriptX } from 'vue-scriptx';` to `import ScriptX from 'vue-scriptx';`.

Property '$' does not exist on type 'Window & typeof globalThis'.

A script loaded via `<scriptx>` (like jQuery) adds global variables (e.g., `$`) that TypeScript's static analysis is not aware of by default.

fix

Add a global declaration in a `.d.ts` file (e.g., `globals.d.ts`): `declare const $: any;` or for better typing: `import type * as JQuery from 'jquery'; declare global { interface Window { $: JQuery; } }`.

Upgrade

Version history

0.2.7latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for integrating with Vue 3 applications.

Agent activity

12 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/iann838/vue-scriptx ↗

packagehttps://www.npmjs.com/package/vue-scriptx ↗