I Moved Away From Webpack — and When I Loaded Vue Directly in the Browser I Faced Some Problems. | by Lukas Gamper | Apr, 2022

Over months my frustration with Webpack constructed up, after each replace one thing needed to be fastened and it began to put on me out so I requested myself: Why do I want a bundler anyway? Can the app run straight within the browser? The browser APIs have grown up, simply give them a attempt!

So my first objective is to create the most straightforward Vue software I can consider. Simply import the createApp perform from Vue and show a easy template on the display screen. How do I load Vue within the browser? The Vue documentation is aware of the reply: The Vue supply code may be loaded by way of a content material supply community:

After I open the app within the browser, I notice: I’m heading in the right direction! I can run Vue within the browser with out a bundler.

However writing the entire app within the major.ts file single is kind of inconvenient. After I was utilizing a bundler, I may break up the app in parts, utilizing the Vue single file components.

If the bundler can do that, why ought to the browser not be capable of do that? Include me on a journey to load single file parts straight within the browser.

The appliance above is fairly easy, it’s solely a template with out logic. If I do the identical in a single web page part it seems like

Hmmm, how do I load a file like this straight within the browser?

  1. Utilizing the fetch API I can load the part file from the server.
  2. Then the file may be reworked utilizing the innerHTML property right into a DOM illustration of the part.
  3. The querySelector permits to extract the template ingredient.

That is all of the magic! With this perform I can import the quite simple ChildComponent.vue

If I open the browser, I do know, what ought to be displayed:

Sure! I managed to load a template from a Vue single file part! That’s superior! However a Vue part with out logic has fairly restricted use. What in regards to the logic?

The ChildComponent is changing into a full actual wold Vue part with template and logic.

However its’s not as straightforward because it appears within the first place we will’t simply consider the script utilizing innerHTML. Why? The HTML5 specifications on innerHTML tells me why:

Word: script components inserted utilizing innerHTML don’t execute when they’re inserted.

This implies the browser will not be going to assist. So I’ve to do it by myself.

My first thought was to create a <script> tag or use the ugly eval perform, however the <script> tag or the eval perform are dinosaurs from the pre module age. However a Vue single part file has a module with a default export in its logic half. This implies the 2 choices above should not legitimate choices.

There’s a third, much less identified strategy to consider a module: If I signify the logic as a data URI, the import() operator lets me dynamically load the JavaScript modules:

The code above will present the alert window

That is the trick I used to be in search of. Utilizing this trick, the one part file import perform turns into.

Now my single part file loader already helps templates and logic. Now, I can use Vue within the browser with out a bundler. However after a while, the model sheet will get fairly messy. What about utilizing kinds within the single-component file?

That is simpler as anticipated. The one factor I’ve to do, is to maneuver the model ingredient from the one file part to the precise DOM. This may be performed with a single line of code:

That’s it! We will use single part recordsdata with templates, logic and kinds.

However as quickly as I introduce my first submodule nothing works anymore. All our imports within the single-component recordsdata broke.

Initially: why are they damaged? Properly to be truthful, how ought to the browser be capable of resolve relative paths? I consider the logic utilizing the import trick and by doing this, the browser looses the context. The browser has no probability to know the relative path of the module.

That is the ultimate downside. If I handle to repair this, I can run an entire Vue software within the browser utilizing single part recordsdata.

To repair the imports I want to switch all of the relative import paths with absolut paths. This code is a little more difficult, however basically, I must do the next three steps:

  1. I want to find out the bottom url of the imported single part file. This may be performed utilizing the <base> to rework the relative path of the module into an absolute one.
  2. Discover all import statements utilizing an everyday expression
  3. and change every relative import path with an absolute one.

The ultimate single part importer turns into a bit extra complicated, however with simply 50 strains of code, I can import Vue single part recordsdata! That is unbelievable! We will simply run Vue single-file parts, with out a bundler. And now comes the BUT: It is a good expertise demonstration, however don’t use this in manufacturing.

So I went again to Webpack and after losing many hours googling, I solved my Webpack conflicts and use Webpack ever since.

This instance reveals how the net has majored during the last decade. Native Browser APIs have already reached the purpose, we will run a full Vue software with out a bundler. The Browser API’s turn out to be extra energy full annually and if the event continues at this tempo, many instruments used at present could turn out to be out of date in just some years.

That is unimaginable! It’s attainable to import a Vue single file part with simply 50 strains of code. However this can’t be in comparison with the @vue/compiler-sfc. The answer above, lacks many options like scoped kinds, different languages like TypeScript within the script tag, or sizzling module alternative. The continues to be a protracted strategy to go till the browser can present the same developer expertise to a bundler.

More Posts