Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use it in vue.js project?

See original GitHub issue

SystemJS Version: 6.5.0
Which library are you using?
- system.js
- s.js
- system-node.cjs
Which extras are you using?
- AMD extra
- Named Exports
- Named Register
- Transform
- Use Default
- Global
- Dynamic Import Maps
Are you using any custom hooks?

Question

I create a default project use vue-cli。I want to use system.js to dynamic import remote packages when click button,so I change index.html & App.vue file. like this:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <script type="systemjs-importmap">
      {
        "imports": {
          "vue": "http://127.0.0.1:8081/node_modules/vue/dist/vue.js",
          "lodash": "http://127.0.0.1:8081/node_modules/lodash/lodash.js",
          "com1": "http://127.0.0.1:8080/dist/bundle.js"
        }
      }
    </script>
    <script src="http://127.0.0.1:8081/node_modules/systemjs/dist/system.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <button @click="handleClick">click me to import packages</button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },

  methods: {
    handleClick() {
      System.import('com1').then(res => {
        console.log('import success', res)
      });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

error output :

This dependency was not found:

* com1 in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save com1

my question is:

Is there a problem with my usage？
How to use it in vue？

Thank you very much!

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

1reaction

joeldenningcommented, Aug 20, 2020

Hi @linghuam, thanks for providing the sample repo. I have created https://github.com/linghuam/system-vue-test/pull/1 which fixes the issue in your repository.

I omitted one important step from my list above - to turn of webpack’s parsing of System.import(). This is documented at https://github.com/systemjs/systemjs#compatibility-with-webpack and requires a simple change to the vue.config.js configureWebpack section.

Closing this issue since it seems to be resolved. Feel free to comment further or reopen. Also if you have interest in contributing to the systemjs-examples repo with a Vue example, that would be great. I think it would be most suited for the starter-kits folder.

0reactions

viT-1commented, Jan 31, 2022

Another vue2 js example, without typescript, js only.

Top Results From Across the Web

Creating a Project | Vue CLI

Standard Tooling for Vue.js Development. ... For new projects, it is now recommended to use create-vue to scaffold Vite-based projects.

How to Set up Vue.js project in 5 easy steps using vue-cli

Step 1 npm install -g vue-cli ; Step 2. Syntax: vue init <template-name> <project-name> example: vue init webpack-simple new-project ; Step 3 cd ......

Vue JavaScript Tutorial in Visual Studio Code

To install and use the Vue CLI as well as run the Vue application server, you'll need the Node.js JavaScript runtime and npm...

Getting started with Vue - Learn web development | MDN

Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue ......

Quickstart: Create your first Vue.js app - Visual Studio (Windows)

Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js...