How can I share a library between my Vue CLI application and existing vanilla JavaScript?

Question

I'm working on a WordPress website that uses the Swiper library, on several pages, as an npm dependency. Included in the website is an embedded Vue CLI 4 app, that I'd also like to add the Swiper library to. Currently, the website has its own webpack config, while the app uses a slightly modified version of its default build config.

There are Vue Swiper components that I could use but, as I'm already using the original library, I'd like to avoid duplication. I assume I'd need to somehow combine my two build processes (unless there's another solution), but I've not attempted anything like that before.

The main webpack config is as follows:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, options) => {
    return {
        entry: {
            main: ["./src/js/index.js", "./src/scss/index.scss"],
            admin: ["./src/scss/admin.scss", "./src/js/admin/index.js"]
        },
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "[name].js",
            publicPath: "/dist"
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: "babel-loader",
                        options: { presets: ["@babel/preset-env"] }
                    }
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        "sass-loader"
                    ]
                },
                {
                    test: /\.svg$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: '/images',
                            publicPath(url) {
                                return `/wp-content/themes/themename/dist/images/${url}`
                            },
                        },
                    }
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css"
            })
        ]
    }
};

And the directory structure:

├── app
|   ├── src
|   ├── dist
|   ├── ...
|   └── vue.config.js
├── src
├── dist
├── ...
└── webpack.config.js

Ideally, I'd like to keep the directories as they are, so how would I be able to use Swiper in both projects, without having it duplicated across both bundles?

Answer 1

Just add all dependencies via NPM to be included in the build vendor bundle.

You could then use vanilla JS like referenced here:

// Either Vanilla JavaScript
window.addEventListener('load', function() {
  console.debug('All assets are loaded');
})
// or jQuery
$(document).ready(function() {
  // After App class declared in global namespace
  App.init();
});
// Loaded in document head
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    // After App class declared in global namespace
    App.init();
  }); 
</script>

I'd advise using or learning about Vue CLI bootstrapped project template with CLI plugins added via webpack and NPM. Then in vue.config.js file you can configure your webpack plugin settings.

For instance, using Webpack Bundle Analyzer plugin to be run as your build via a npm script command. With -o parameter it opens a visualized map of your vendor scripts bundle size on a block map.

EDIT: So in your vue.config.js you could add separate entrypoints:

module.exports = {
  pages: {
    app: {
      index: 'client/src/index.ts',
      template: 'client/public/index.html',
    },
    main: {
      entry: 'client/src/main.ts',
      template: 'client/public/main.html',
    },
  },
};

Then index.html you can for example dynamically check if some rule, i.e. active session id in local storage, and based on that intel execute init method for your app.

Then you'd have main.ts which directly starts the app, when user browsing to /main path in your domain.

Answer 2

If you want Vue to use a library that's already loaded in the window object, specify it in vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.externals({
      swiper: 'Swiper'
    })
  }
}

Now anywhere you use import Swiper from 'swiper' (or import * as Swiper from 'swiper' - depending on your tsconfig and on how the lib you're using is exported) you're actually getting whatever window.Swiper is at the moment whatever imports it is instantiated (might be the app or might be at load time of a lazy loaded component).

---

As far as reputable sources go, I believe the highest authorities on the matter are:

• Vue documentation: chaining webpack
• webpack documentation: externals

Externals

Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.

---

Also note you have to import the module in public/index.html using a <script> (pointing to wherever you load that lib from in production), if you want your serve to work, as you now have told webpack it's going to find that dependency in the window object. Otherwise your build will work just fine (assuming window.Swiper exists in production), but serve won't.

---

Using externals with typescript:

Note you will still need @types/${moduleName} in devDependencies if you want ${moduleName} to be typed in your application, if @types/${moduleName} exists.

If it doesn't, you can import the types from the package (in devDependecies, just for the types, it won't be included in the bundle). If none of these options is valid for your particular package, you probably want to declare a mock module in your shims-vue.d.ts:

declare module '${moduleName}';

...which will effectively disable typescript checking for that module. Do note declaring a mock can be detrimental, as it will override any existing typings for that module. So only use it when nothing else works.

Obviously, in your case ${moduleName} is swiper.