VueJs CLI 3 - how add external lib

vue cli
webpack externals
vue import javascript library
vue import js file from url
webpack externals vue
vue-cli externals
webpack externals config
vue 3 webpack

I have a vue app created by latest vue CLI (vue 3.5.1) using this following command line:

vue ui

This is my folder structure:

app_vue: |- node_modules |- public |- src: |---- assets |---- components: |---------List.vue |---- libs: |--------- pagination: |------------- css: |----------------- pagination.css |------------- js: |----------------- pagination.js | ...

The libs folder doesn't exist before I just created manually.

I also create manully vue.config.js file but I don't know what I should add here.

const path = require('path')
module.exports = {}

My List.vue:

<template>
  <div>
     ...
     <div id="pagination"></div> 
  </div>
</template>
<script>
  // how use pagination.js ???
  export default {
   ...
  }
</script>
<style>
  //how use pagination.css ???
  ...
<..style>

I want use the pagination libs in List.vue component. I want to use something like that:

libs/pagination/pagination.css

not

../../libs/pagination/pagination.css

How I can do it.

If you want to use the files in just your components/views, you import what you want into the files that need them: import MyLib from "../path/to/libs"; is an example.

However, if you want something to be added globally, you can do add them in your App.vue (or your base Vue component), in a non-scoped style tag:

<style>
@import "https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons";

#app {
  font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

The example above will expose all the styles to your entire application. If you put any styles in a scoped style tag, they will be scoped to that component or view.

VUE-CLI: Adding external js and css libraries - Get Help, I would like to do how to include libraries from a CDN (like VUE-CLI: Adding external js and css libraries fabs 19 July 2018 09:20 #3. VUE-CLI: Adding external js and css libraries. Get Help. fabs 19 July 2018 08:53 #1. Hi all, I’m using vue-cli for the first time.

If you want to import this library and it is ES6 or other module then you might want to use chainWebpack option and define something like

 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     webpackConfig.resolve
      .alias
      .set('~', api.resolve('lib'))
   }
}

For more example you might want to look here

Building external modules in VueJS, Vue CLI installed on your machine. To build our external Vue module, we need to make sure it is one that can be Add one or more global assets: directives/ filters/transitions etc. "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel- loader": "^7.1.1", This allows us to import the library via HTML. I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself.

The following solution works for me.

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('libs', path.resolve(__dirname, 'src/libs/'))
    }
}

List.vue

<script>
   import { Pagination } from "libs/pagination/js/Pagination.js"
   import 'libs/pagination/css/pagination.css'

   export default {
       ...
       mounted()
       {
           console.log(new Pagination("#pagination"))
       }
       ...
   }
</script>

Use Any JavaScript Library With Vue.js, Lodash, Moment, Axios, Async…these are useful Javascript libraries to utilise in How not to include a library in a Vue.js project Join our free four-part email course to learn the key changes in Vue 3 that you If you're creating a full-stack app with Vue, you may still want the advantages of Vue CLI 3. A plugin abstracts complexity and allows you to simply do the following in a project to add your chosen library: import MyLibraryPlugin from 'my-library-plugin'; Vue.use(MyLibraryPlugin); With these two lines we can use the library in any component just like we can with Vue Router, Vuex and other plugins that utilise Vue.use. Writing a plugin

How to add external javascript library to vue.js webpack application , How to add external javascript library to vue. js webpack application � 1. Add telerik code to /static folder � 2. Add Telerik to package. � 3. Add� The bundle with external dependencies can be used in various module contexts, such as CommonJS, AMD, global and ES2015 modules. The external library may be available in any of these forms: root: The library should be available as a global variable (e.g. via a script tag). commonjs: The library should be available as a CommonJS module.

How to create, publish and use your own VueJS Component library , Add vue-cli-service build --target lib --name myLib [entry] to your After Vue.js team came up with the CLI version 3, it has become super-easy� 🛠️ Standard Tooling for Vue.js Development. Feature Rich. Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.

wuruoyun/vue-component-lib-starter: A bare-bones , A bare-bones example of creating your own Vue component library. Create your own component library with Vue CLI 3 and VuePress. install dependencies npm install # start the doc app with hot reload, great for testing components npm run docs:dev # build the library, available One strategy is to make it external. I'm unable to figure out how to include the Pure.css external css library into my projects. I have added css loader to my webpack conf: { test: /\.css$/, loader: 'style-loader!css-loader' }, and requiring it my main.js file: import purec

Comments
  • That's not how you import JS: MDN Import JS
  • sorry I wanted say import '@/libs/pagination/js/pagination.js' using folder alias
  • Ah, yes you can do that! @ is an alias to the src directory I think