{"id":14303,"library":"vue-scriptx","title":"VueScriptX - Asynchronous Script Loading for Vue","description":"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.","status":"active","version":"0.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/iann838/vue-scriptx","tags":["javascript","vue3","script","injection","asynchronous","async","loading","loader","load","typescript"],"install":[{"cmd":"npm install vue-scriptx","lang":"bash","label":"npm"},{"cmd":"yarn add vue-scriptx","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-scriptx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for integrating with Vue 3 applications.","package":"vue","optional":false}],"imports":[{"note":"ScriptX is the default export for plugin installation, not a named export.","wrong":"import { ScriptX } from 'vue-scriptx';","symbol":"ScriptX","correct":"import ScriptX from 'vue-scriptx';"},{"note":"The `$scriptx` property is added to the Vue instance context. For TypeScript, explicit declaration merging is required to correctly type `this.$scriptx`.","wrong":"const scriptx = this.$scriptx; // Typescript will error without declaration merging","symbol":"$scriptx (Global Property)","correct":"declare module 'vue' {\n  interface ComponentCustomProperties {\n    $scriptx: typeof import('vue-scriptx').ScriptXService;\n  }\n}"},{"note":"The `<scriptx>` component is globally registered when the plugin is installed via `app.use(ScriptX)`.","symbol":"ScriptX component in template","correct":"<scriptx src=\"https://example.com/script.js\"></scriptx>"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport ScriptX from 'vue-scriptx';\n\nconst app = createApp(App);\napp.use(ScriptX);\napp.mount('#app');\n\n// In a Vue component (e.g., App.vue <script setup> or methods):\n// For template usage:\n// <template>\n//   <div id=\"app\">\n//     <scriptx src=\"https://code.jquery.com/jquery-3.7.1.min.js\"></scriptx>\n//     <scriptx>/* This script loads after jQuery */\n//       const msg = window.$.text('Hello from VueScriptX!');\n//       console.log(msg);\n//     </scriptx>\n//     <scriptx src=\"https://unpkg.com/lodash@4.17.21/lodash.min.js\" async></scriptx>\n//   </div>\n// </template>\n\n// For programmatic usage within a component's script:\n// Assuming this is inside a component's setup() or methods:\n// import { getCurrentInstance, onMounted } from 'vue';\n// onMounted(() => {\n//   const instance = getCurrentInstance();\n//   instance?.appContext.config.globalProperties.$scriptx.load('https://example.com/another-script.js')\n//     .then(() => {\n//       console.log('Another script loaded programmatically!');\n//     })\n//     .catch(error => {\n//       console.error('Failed to load script:', error);\n//     });\n// });","lang":"typescript","description":"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."},"warnings":[{"fix":"For parallel loading, use `<scriptx src=\"...\" async></scriptx>`. For ordered execution (default), omit the `async` prop.","message":"VueScriptX 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your project uses Vue 3 (`vue@^3.0.0`). For Vue 2, consider `vue-script2` (which inspired this package).","message":"VueScriptX 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.","severity":"breaking","affected_versions":"<3.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'3':13 'aim':42 'asynchron':2,17 'compon':31,35 'custom':34 'direct':28 'execut':20 'extern':22 'facilit':16 'familiar':46 'file':24 'focus':11 'global':38 'inlin':26 'javascript':23 'load':4,18 'plugin':14 'properti':40 'reintroduc':44 'script':3,27 'scriptx':39 'small':10 'use':32 'vue':6,12,30 'vuescriptx':1,7 'within':29","created_at":"2026-04-20T01:59:00.216602+00:00","updated_at":"2026-04-20T01:59:00.216602+00:00","problems":[{"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.","cause":"TypeScript cannot infer the global properties added to `this` by Vue plugins without explicit declaration merging.","error":"Property '$scriptx' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'."},{"fix":"Change your import statement from `import { ScriptX } from 'vue-scriptx';` to `import ScriptX from 'vue-scriptx';`.","cause":"`ScriptX` is the default export of the `vue-scriptx` package for plugin installation, not a named export.","error":"Module 'vue-scriptx' has no exported member 'ScriptX'."},{"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; } }`.","cause":"A script loaded via `<scriptx>` (like jQuery) adds global variables (e.g., `$`) that TypeScript's static analysis is not aware of by default.","error":"Property '$' does not exist on type 'Window & typeof globalThis'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/iann838/vue-scriptx","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-scriptx","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}