vue3-hybrid-scripts

Often your Vue app is depending on 3rd party scripts like: Google Tag Manager, Advertising scripts, Tracking or just a script that you need to load from a CDN. By using this Vue3 hook you can define 3rd party scripts in any Vue component you want. ‘vue-hybrid-scripts’ will then make sure your script(s) will be available both server side as client side and will notify when ready.

installation

npm install vue3-hybrid-scripts

Basic vue3 composition API example with SSR

In your .vue template

import { useHybridScripts } from 'vue3-hybrid-scripts'

const unregisterListener = useHybridScripts('https://code.jquery.com/jquery-3.6.0.min.js', () => {
    // this callback will be executed in your browser when script is loaded
});

// cleanup in onUnMount
onUnmounted(unregisterListener);

On your server

const app = createSSRApp(App);
const ssrContext = {};
const html = await renderToString(app, ssrContext);

// Render your scripts and inject into your preferred template engine
const scripts = ssrContext.hybridScripts.render();

Advanced examples

Use mulitple scripts at the same time:

useHybridScripts([
    'https://www.someurl.com/script1.js',
    'https://www.someurl.com/script1.js'
   ], () => {
    // callback
});

Javascript and css files are both supported:

useHybridScripts([
    'https://www.someurl.com/styles.css',
    'https://www.someurl.com/script1.js'
   ], () => {
    // callback
});

Javascript and css entries support object notations:

useHybridScripts([
    { href: 'https://www.someurl.com/styles.css'},
    { src: 'https://www.someurl.com/script1.js' async: true }
   ], () => {
    // callback
});

// script: { src: string, async: boolean, defer: boolean }
// link: { href: string }