Astro 3.0 with ViewTransition and Vue component

[amir20]

Astro Info

Astro                    v3.0.6
Node                     v20.5.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/vue

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

I am following examples from docs and trying to get a simple Counter working where the component persists. However, my custom component disappears after navigation.

My counter is placed in Layout

<MyCounter transition:persist transition:name="counter" client:load/>

With MyCounter.vue

<template>
  <div>Counter is {{ count }}</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
setInterval(() => count.value++, 1000);
</script>

<style scoped>
div {
  color: red;
}
</style>

When navigating to another page, this component disappears.

What's the expected result?

I expect this component to not disappear, and the counter value to persist.

I have searched other bugs that are open and nothing seems similar. Perhaps this is a simple mistake because my example is from the docs.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-sv58pq

Participation

• I am willing to submit a pull request for this issue.

[miguelean]

I have the same issue with React components ☝️

[winkerVSbecks]

I have a similar problem with React. In my case the styles disappear. I'm using emotion so not sure if that's related.

[idlist]

Have the similar issue with Vue component. Component does still exists, but the style's gone.

[nicholasq]

Commenting to say I have the same issue with styling disappearing. I have a navbar built with svelte and i'm using this directive client:only="svelte". When i navigate to another page, all of the styling for the navbar is gone.

[matthewp]

Can everyone here try with > 3.0.8? There was a style fix for client:only for that. Should probably fix these as well.

[amir20]

Tested with 3.2.0 and my Vue component still disappears after navigation.

[miguelean]

#8361 (comment)

Can everyone here try with > 3.0.8? There was a style fix for client:only for that. Should probably fix these as well.

Worked for me. Thanks! 🥳

[winkerVSbecks]

Still have the same issue

CleanShot.2023-10-04.at.09.46.41.mp4

[martrapp]

When generating the astro-island for the Vue component, the transition attributes were copied to the content of the island. The code for moving persistent elements between DOMs does not cope with same attributes in nested elements: first the island is moved in, then an attempt is made to again move its content. When reaching into the void, the content of the island is unintentionally deleted.

Fix #8776 removes the incorrect double generation of attributes

[martrapp]

@miguelean I read above that the client:only fix worked. Unfortunately we had to roll it back because it had too many negative side effects. As a short term workaround for DEV I recommend to import the style sheets for the client:only component explicitly. (I.e. not automatically by the components, but "by hand" on the pages that use the components.)
For further discussion see PR #8745.