SystemJS Vue 2 Component Loader

1.1.2 · abandoned · verified Sun Apr 19

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.

Common errors

```
SystemJS Error #8: Unable to resolve bare specifier "vue"
```
cause The module loader cannot find the 'vue' package because it's not defined in the SystemJS configuration's `map` or import map.

fix Add an entry for 'vue' in `System.config().map` (e.g., `vue: 'https://unpkg.com/vue@2.5.16/dist/vue.esm.browser.js'`) or within a `<script type="systemjs-importmap">` block.
```
SystemJS Error #3: Unable to load module (Error event fired)
```
cause The SystemJS loader failed to download or execute a module. This could be due to an incorrect URL, network issues, or a JavaScript error within the loaded file.

fix Check the URL in the SystemJS `map` for the module; verify it's accessible and returns valid JavaScript. Inspect browser console and network tabs for specific HTTP errors or JavaScript syntax errors.
```
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
```
cause Attempting to load SystemJS or modules via the `file://` protocol in a browser, which disallows cross-origin requests necessary for module loading.

fix Serve your application using a local web server (e.g., `npm install -g http-server`, then `http-server`) rather than opening `index.html` directly from the file system.
```
[Vue warn]: Invalid template option: [object Object] (or similar Vue initialization errors)
```
cause Often indicates an incompatibility between Vue.js and SystemJS, or improper loading of Vue's runtime, leading to Vue not being correctly initialized or components not being compiled.

fix Ensure the correct Vue runtime (e.g., `vue.esm.browser.js`) is loaded and that `dx-systemjs-vue-browser` is correctly configured in `System.config`'s `meta` section to process `.vue` files.

Warnings

breaking Vue.js 2 reached its End-of-Life (EOL) on December 31st, 2023. This means it no longer receives official updates, security patches, or bug fixes from the Vue core team. Continued use of Vue 2 in production environments without third-party extended support (e.g., HeroDevs NES) carries significant security and compatibility risks.
Fix: Migrate to Vue 3 for active maintenance and security updates, or acquire commercial extended support for Vue 2.
gotcha SystemJS requires explicit configuration for all module paths and loaders, which can be complex to manage. Bare specifiers (e.g., 'vue') must be mapped to full URLs or local paths within the `System.config`'s `map` property, or via import maps.
Fix: Ensure all dependencies, including 'vue' and other SystemJS plugins (like 'plugin-babel'), are correctly mapped in your `System.config` or `<script type="systemjs-importmap">`.
gotcha This plugin relies on in-browser transpilation via `systemjs-plugin-babel` and specific browser builds of Vue 2 (e.g., `vue.esm.browser.js`). This setup is less performant and flexible than modern bundler-based workflows (e.g., Webpack, Vite) and might not support all advanced ES features or pre-processors without further configuration.
Fix: For production, consider pre-compiling Vue components and modules to System.register format or adopting a modern build pipeline with Vue 3.
gotcha Hot Module Replacement (HMR) or hot-reloading capabilities with SystemJS are significantly more limited compared to modern development servers integrated with bundlers like Webpack or Vite.
Fix: Expect full page reloads during development or implement custom, basic hot-reloading logic, which can be complex.

Install

npm install dx-systemjs-vue-browser npm
yarn add dx-systemjs-vue-browser yarn
pnpm add dx-systemjs-vue-browser pnpm

Imports

System.config
wrong:
```
import { config } from 'systemjs'
```
correct:
```
System.config({
  // ... configuration options
})
```
Configuration for SystemJS is done via the global `System` object, not through ES module imports.
System.import
wrong:
```
import YourComponent from 'your-vue-component.vue'
```
correct:
```
System.import('your-vue-component.vue').then(module => {
  // Use the module
})
```
Vue components are loaded dynamically at runtime using `System.import()`, often after SystemJS configuration is applied.
meta for *.vue files
wrong:
```
System.config({
  "*.vue": { loader: "vue-loader" }
})
```
correct:
```
System.config({
  meta: {
    "*.vue": { loader: "vue-loader" }
  }
})
```
The `meta` property is crucial for instructing SystemJS to use the `vue-loader` (this plugin) for all `.vue` files.

Quickstart

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

view raw JSON →