Having issues with hydration directive and script setup

[rylanharper]

Hey there everyone! I am currently using îles on a website I am building for a local wellness center. I am enjoying it a lot so far!

I am running into an issue within my mobile menu toggle that uses pinia; I believe the core of the issue stems from my lack of understanding using the Hydration Directives that îles offers. In my local environment it works wonderfully, but once I try and deploy it to Netlify I run into a build error: Incorrect usage of hydration strategy in script setup.

components/nav-mobile.vue:

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore()

function handleClick() {
  store.toggleMenu()
}
</script>

<template>
 // Extra code
  <button
    aria-label="Menu Toggle"
    @click="handleClick"
    @keyup.enter="handleClick"
  >
</template>

store/index.ts:

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      menuOpen: false
    }
  },
  actions: {
    toggleMenu(state?: boolean) {
      if (typeof state === 'boolean') {
        this.menuOpen = state
      } else {
        this.menuOpen = !this.menuOpen
      }
    }
  }
})

Here is my component with client:visible. My issue still persists:

components/nav-mobile.vue:

<script setup client:visible lang="ts">
import { useStore } from '@/store'
const store = useStore()

function handleClick() {
  store.toggleMenu()
}
</script>

<template>
  // Extra code
  <button
    aria-label="Menu Toggle"
    @click="handleClick"
    @keyup.enter="handleClick"
  >
</template>

If anyone has any input for how I can effectively use my hydration directive so I can get my mobile-toggle/mobile-menu working on live that would be great! :)

[ElMassimo]

Hi Rylan,

This is something that the Client Scripts doesn't mention explicitly, but anything that you define in a Client Script is essentially separate from the Vue component, it will just be injected next to where it's rendered. It's an alternative to islands, where you need client-side code that does not map to a component.

The hydration directives should not be used in <script setup> but in a separate plain script tag, and you wouldn't be ableto share state or methods, since they are running in different contexts (script setup runs when building the site, the client script runs in the browser).

---

I'd recommend not using Pinia in client scripts, and instead simplify and use plain ref instead.

See this example in the docs site, which is very similar to what you are trying to achieve here 😃

Also see this thread for a similar discussion with different approaches, including some that don't even use Vue.