Trouble with client:load, vue plugins, and provide/inject

[grahamc]

Hi,

I'm trying to integrate posthog into an Iles site. I made a Vue plugin:

import { App, Plugin } from 'vue';
import posthog from "posthog-js";

export interface PosthogPluginOptions {
}

export const PosthogPlugin: Plugin = {
  install(app: App, options: PosthogPluginOptions) {
    if (typeof window !== "undefined") {
      posthog.init(
        "...",
        {
          api_host: "https://app.posthog.com",
        }
      );
    }

    console.log('posthog plugin: providing posthog');
    app.provide('posthog', posthog);
  }
}

and I use enhanceApp to integrate it:

import { defineApp } from "iles";
import { PosthogPlugin } from "~/plugins/posthog";
// [..snip..]
export default defineApp({
  head: {
    // [..snip..]
  },
  enhanceApp ({ app }) {
    app.use(PosthogPlugin)
  },
});

now I'm trying to add a CookieConsent component which needs to interact with the posthog library. I load it like this:

<CookieConsent client:load />

and it looks like this (simplified):

<template>
  <div>
    [..snip..]
  </div>
</template>

<script setup lang="ts">
import { PostHog } from "posthog-js";
import { inject } from "vue";
const posthog = inject('posthog') as PostHog;

// [..snip..]
</script>

However, when I try it, I get errors about posthog not being provided:

[Vue warn]: injection "posthog" not found. 
  at <CookieConsent > 
  at <Island: CookieConsent>

I can confirm, however, that the plugin is being run, and in the right order. To check that, I added a console.log entry to the plugin right before calling app.provide(posthog). I got this output:

posthog plugin: providing posthog posthog.ts:18:12

[Vue warn]: injection "posthog" not found. 
  at <HorizontalContainer> 
  at <Navbar> 
  at <Top> 
  at <Page> 
  at <BaseLayout> 
  at <DefaultLayout key=1 > 
  at <RouterView> 
  at <îles> recorder.js:32:9367

I've been trying to make this work for a few days now and I'm running out of ideas on how to approach it. Any suggestions? Thank you, and thank you for îles!

[ElMassimo]

Hi Graham!

enhanceApp only applies to the Vue app that is used during development, and at build time to statically generate the app.

Islands on the other hand, are each one a separate app (which is why you can use Vue, Svelte, Solid, or Preact).

Generally, I'd recommend not to use Vue plugins, and instead leverage the composition API and create a usePosthog composable, which you could potentially call both inside and outside islands, without having to think about it.

---

You can still add plugins to Vue islands, though the syntax is more awkward:

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import PosthogPlugin from '~/plugins/posthog' // example

const app = getCurrentInstance().appContext.app
app.use(PosthogPlugin)
</script>

I'm not familiar with Posthog, so I'm not sure if this is a viable approach.