Vue Migration Part 2 - A Simple Solution Emerges

In Part 1 of our Vue migration journey at Open Library, I expressed frustration with the tooling's lack of support for our specific use case. However, I'm pleased to report that we've found an elegant solution. You can view the final implementation in this pull request.

Seeking feedback, I turned to Reddit, where a question about the necessity of inline dynamic imports set me on the right path. I realized we weren't using dynamic imports at all. I had initially enabled them as required for IIFE mode, which I had chosen for its compatibility with older browsers.

There's a better method for supporting legacy browsers while maintaining modern functionality. The solution is to use the legacy plugin and create two separate builds: a modern version and a legacy fallback. It looks like this for the client:

<script type="module" src="{modern_build}"></script>
<!-- Fallback for legacy browsers -->
<script nomodule src="{polyfills_build}" defer></script>
<script nomodule src="{legacy_build}" defer></script>

This approach offers several advantages:

1. It produces smaller file sizes.
2. It extends support to an even broader range of older browsers.
3. Modern browsers use the optimized build, while legacy browsers automatically fall back to the compatible version.

With this improved setup, we can now utilize multiple inputs and outputs in our build process, eliminating the need to run the build tool separately for each component.

As a result, our vite.config.js file has been simplified:

const buildInput = {};
componentNames.forEach(name => { buildInput[name] = getTemporaryVueInputPath(name) });

export default defineConfig({
    plugins: [
        vue({ customElement: true }),
        legacy({ targets: ['defaults', 'not IE 11'] })
    ],
    build: {
        outDir: join(BUILD_DIR, '/production'),
        rollupOptions: {
            input: buildInput,
            output: {
                entryFileNames: 'ol-[name].js',
                format: 'es'
            },
        },
    },
});

While my issue reports suggesting improvements to the documentation remain unaddressed, I hope these blog posts can assist others facing similar challenges.

Found this helpful? Consider joining our Open Library community as a dev, librarian, designer, or in any other way you want to help.