Registry /
web-framework / dx-systemjs-vue-browser
This package, `dx-systemjs-vue-browser` (current stable version 1.1.2, last published about a year ago as of early 2025), functions as a SystemJS plugin designed to enable the loading and interpretation of Vue 2 Single File Components (SFCs) directly within the browser. It allows developers to use `.vue` files without a complex build step, leveraging SystemJS for dynamic module loading. However, it is critical to note that Vue.js 2 reached its End-of-Life (EOL) on December 31st, 2023, meaning it no longer receives official updates, features, or security fixes from the Vue core team. While the package itself remains available, its utility is significantly diminished for new projects or those requiring ongoing security and browser compatibility, as it targets an unsupported framework version. Release cadence for `dx-systemjs-vue-browser` itself appears infrequent, with the last update over a year ago. It primarily differentiates itself by offering a browser-native approach to Vue 2 SFCs, contrasting with modern Vue 3 development which heavily relies on bundlers like Vite or Webpack.
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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Configuration for SystemJS is done via the global `System` object, not through ES module imports.
System.config({
// ... configuration options
})
Vue components are loaded dynamically at runtime using `System.import()`, often after SystemJS configuration is applied.
System.import('your-vue-component.vue').then(module => {
// Use the module
})
The `meta` property is crucial for instructing SystemJS to use the `vue-loader` (this plugin) for all `.vue` files.
System.config({
meta: {
"*.vue": { loader: "vue-loader" }
}
})
This quickstart demonstrates how to configure SystemJS to load Vue 2 Single File Components (`.vue` files) using this plugin, and then dynamically import and mount a simple component. It leverages CDN paths for SystemJS and Babel plugins, along with a specific Vue 2 browser build.
/* global System */
// Ensure SystemJS and plugin-babel are loaded in your HTML via script tags.
// For example:
// <script src="https://unpkg.com/systemjs/dist/system.js"></script>
// <script src="https://unpkg.com/systemjs/dist/extras/amd.js"></script>
// <script src="https://unpkg.com/systemjs/dist/extras/named-register.js"></script>
// <script src="https://unpkg.com/systemjs-plugin-babel@0/plugin-babel.js"></script>
// <script src="https://unpkg.com/systemjs-plugin-babel@0/systemjs-babel-browser.js"></script>
System.config({
transpiler: "plugin-babel",
paths: {
"npm:": "https://unpkg.com/"
},
map: {
vue: "npm:vue@2.5.16/dist/vue.esm.browser.js",
"vue-loader": "npm:dx-systemjs-vue-browser@1.0.5/index.js",
"plugin-babel": "npm:systemjs-plugin-babel@0/plugin-babel.js",
"systemjs-babel-build": "npm:systemjs-plugin-babel@0/systemjs-babel-browser.js"
},
meta: {
"*.vue": { loader: "vue-loader" }
}
});
// Assuming you have a file 'MyComponent.vue' in your project root
// <template><div>Hello from {{ name }}!</div></template>
// <script>export default { data() { return { name: 'Vue Component' }; } }</script>
System.import('./MyComponent.vue').then(VueComponentModule => {
const MyComponent = VueComponentModule.default; // or VueComponentModule
new MyComponent().$mount('#app'); // Mount to a DOM element with id 'app'
console.log('Vue component loaded and mounted via SystemJS!');
}).catch(err => console.error('Error loading Vue component:', err));
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.