Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

Question

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

As we progress in building our Vue applications, we have been using the standard script tag include method for Vue. However, as we transition from jQuery/Knockout-heavy apps to more complex ones, the maintenance issues that may arise if we don't switch to the CLI build sooner rather than later are becoming apparent.

Although not a problem for many of our apps, due to our early adoption of an "internal CDN" approach in our Vue apps, bundling everything in Webpack seems like a step back in terms of versatility. Currently, we serve four files, with each route within our MVC app having its own associated Vue instance (e.g., about.js), controlling the UI and logic. The CDN serves: 1. polyfills.js (for browser compatibility), 2. vendor.js (axios, moment.js, and others), 3. vue.js (vue + vee-validate), and 4. components.js (our custom UI component library).

I'm particularly concerned about #4. Serving this over the CDN has allowed us to instantly push updates to all our apps without running a new build. With the intention of eventually converting all 80+ internal applications, plus existing and new external applications to Vue, updating shared components required by 30 apps means rebuilding and pushing them all, which is far from ideal.

Is there a way to continue using the CDN build solely for our components while bundling the rest as a SPA with Webpack?

Note: This differs from referencing an external JS library like jQuery; I am focusing on adding Vue Components. If you load a library externally and then try to import the component, Vue will throw a console error. Simply adding it won't work either because there's no import, but importing it also fails because it's external to the app.

javascript webpack vue.js vuejs2

Answer 1

Answer №1

Yes, it is possible to utilize http-vue-loader for loading .vue components through the HTTP protocol. However, there are certain restrictions associated with its usage, and it is advised against using it in a production environment.

Answer 2

Yes, it is possible to utilize http-vue-loader for loading .vue components through the HTTP protocol. However, there are certain restrictions associated with its usage, and it is advised against using it in a production environment.

Answer 3

Answer №2

If you want to efficiently manage your applications using a Vue webpack CLI build while still maintaining the freedom of working with independent Vue components, which are served as separate files shared among multiple apps/projects, you might be interested in what can be described as an "internal CDN" architecture.

An insightful suggestion by @RandyCasburn on achieving this goal is to globally expose the Vue object (typically loaded from a CDN via a <script> tag) and then load your individual files that utilize Vue.component to register your components globally.

For further guidance, refer to: How to 'import' Vuejs component into index.html?

However, if your preference is to develop these independent Vue Components as Single File Components (SFC), here are two key solutions for consideration:

Create a small build step tool that converts your SFC into a plain JS file, allowing it to be loaded through a script tag and registered globally using Vue.component.
Rather than generating a JS file that registers with Vue.component, have it expose the Vue Component configuration/options object so it can be locally registered and asynchronously loaded. This approach requires configuring each consumer app's webpack setup to handle loading non-bundled chunks.

Incorporating Vue SFC as a single JS file with Vue.component

A recent template project that facilitates this process is available at: https://github.com/RonnieSan/vue-browser-sfc

The advantage of this method lies in its simplicity - requiring only HTML refactoring to load Vue followed by common components JS files. The components should be globally accessible even during development, eliminating complaints from the Vue runtime about "Unknown custom element". However, all components must be loaded upfront regardless of usage status.

Converting Vue SFC to a single JS file with "async" options object

This alternative presents a more complex yet intriguing solution. By utilizing a build step to convert the SFC .vue file without the need for additional wrapper code with Vue.component declarations, webpack or Rollup can encapsulate the component options object in an IIFE or UMD format that registers the object globally.

To implement this approach successfully, your webpack configuration should be adjusted to facilitate asynchronous loading of components from the network rather than bundling them within the app.

Consider leveraging tools like dynamic-cdn-webpack-plugin along with customized resolver functions to list components in the plugin settings and define their versions/specifications accordingly.

While this method may entail a more intricate webpack setup for consumer apps, it streamlines the async loading process without necessitating modifications to the HTML files. CDN components are fetched on-demand when required, offering potential advantages over traditional loading approaches.

Answer 4

If you want to efficiently manage your applications using a Vue webpack CLI build while still maintaining the freedom of working with independent Vue components, which are served as separate files shared among multiple apps/projects, you might be interested in what can be described as an "internal CDN" architecture.

An insightful suggestion by @RandyCasburn on achieving this goal is to globally expose the Vue object (typically loaded from a CDN via a <script> tag) and then load your individual files that utilize Vue.component to register your components globally.

For further guidance, refer to: How to 'import' Vuejs component into index.html?

However, if your preference is to develop these independent Vue Components as Single File Components (SFC), here are two key solutions for consideration:

Create a small build step tool that converts your SFC into a plain JS file, allowing it to be loaded through a script tag and registered globally using Vue.component.
Rather than generating a JS file that registers with Vue.component, have it expose the Vue Component configuration/options object so it can be locally registered and asynchronously loaded. This approach requires configuring each consumer app's webpack setup to handle loading non-bundled chunks.

Incorporating Vue SFC as a single JS file with Vue.component

A recent template project that facilitates this process is available at: https://github.com/RonnieSan/vue-browser-sfc

The advantage of this method lies in its simplicity - requiring only HTML refactoring to load Vue followed by common components JS files. The components should be globally accessible even during development, eliminating complaints from the Vue runtime about "Unknown custom element". However, all components must be loaded upfront regardless of usage status.

Converting Vue SFC to a single JS file with "async" options object

This alternative presents a more complex yet intriguing solution. By utilizing a build step to convert the SFC .vue file without the need for additional wrapper code with Vue.component declarations, webpack or Rollup can encapsulate the component options object in an IIFE or UMD format that registers the object globally.

To implement this approach successfully, your webpack configuration should be adjusted to facilitate asynchronous loading of components from the network rather than bundling them within the app.

Consider leveraging tools like dynamic-cdn-webpack-plugin along with customized resolver functions to list components in the plugin settings and define their versions/specifications accordingly.

While this method may entail a more intricate webpack setup for consumer apps, it streamlines the async loading process without necessitating modifications to the HTML files. CDN components are fetched on-demand when required, offering potential advantages over traditional loading approaches.

Answer 5

Answer №3

Have you considered configuring multiple entry points in your webpack.config.js? By doing so, you can have one entry point specifically for loading components and another for other files. The sample code snippet below, sourced from the webpack website, illustrates how to achieve this.

{
  entry: {
    app: './src/app.js', //Exports to /dist/app.js
    search: './src/components.js' //Exports to /dist/components.js
  },
  output: {
    filename: '[name].js',  //[name] is replaced with the 
                            //key names in the entry option(app & search) 
    path: __dirname + '/dist'
  }
}

You would then create a file /src/app.js that imports items 1-3, and a /src/components.js that imports your .vue files.

Answer 6

Have you considered configuring multiple entry points in your webpack.config.js? By doing so, you can have one entry point specifically for loading components and another for other files. The sample code snippet below, sourced from the webpack website, illustrates how to achieve this.

{
  entry: {
    app: './src/app.js', //Exports to /dist/app.js
    search: './src/components.js' //Exports to /dist/components.js
  },
  output: {
    filename: '[name].js',  //[name] is replaced with the 
                            //key names in the entry option(app & search) 
    path: __dirname + '/dist'
  }
}

You would then create a file /src/app.js that imports items 1-3, and a /src/components.js that imports your .vue files.

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

Answer №1

Answer №2

Answer №3

Similar questions

When utilizing Vue.js, I aim to eliminate a <td></td> element as the colspan data increases

Sending data from the server to the client in MVC using C#

What could be causing NVM (for Windows) to malfunction and consistently display error messages every time it is executed?

Ways to change the URL post saving a cookie with express?

Simple chart with four sections in DimpleJS (D3)

Remove dynamically created elements from an AngularJS div

`Get the height of a specific element within a FlatList using the index property in React Native`

Storing past entries in a local storage using JavaScript

Removing an element in Vue.js

What is the best way to upgrade to a specific version of a child dependency within a module?

Ways to confirm non-null values and bypass the row if it is

Transform an array of objects into a nested tree structure with Javascript

Error message encountered: ReferenceError - The subcommand specified in Discord.js Slash Command function is undefined

Assign the DatePicker Object to an HTML Element

Guide to rendering a div class conditionally in a Razor page depending on a variable?

Managing browser navigation within a web application

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

What is the best way to segregate Express routes from server.js?

Enable JavaScript in Webdriver Selenium to enhance the functionality of your web

Tips for maintaining selected text while a modal window is active