Static Vue HTML is being hydrated.

[eslamodeh]

Astro Info

Astro                    v5.1.1
Node                     v23.4.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/netlify
Integrations             @astrojs/partytown
                         @astrojs/tailwind
                         @astrojs/vue
                         @astrojs/sitemap

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

No response

Describe the Bug

I have a component, let's call it A.astro

A.astro renders another component called A.vue.

A.vue looks like:

<template>
    <H1> H1 in Vue </H1>
    <H2> H1 in Vue </H2>

    <MyCustomForm />
</template>

Note that H1 and H2 is static html only(no JS logic at all).

A.astro simply uses:

<A client:load />

The problem:

The browser makes 3 JS request to download A.vue, H1.vue, and H2.vue components. However, H1 & H2 must not be rendered a JS component since they're purely HTML.

What's the expected result?

It's expected that Astro doesn't render H1 & H2 as Javascript components if they are static HTML.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ctq6mph8?file=src%2Fpages%2FA.astro

Participation

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

[ascorbic]

Are you seeing this in build or just dev? I tried your repro, running npm run build and then npm run preview and it's just downloading a single A.xxxxxx.js chunk. It's expected that it will download them all during dev, because that's how Vite works, and how it can do HMR. You'll get the same behaviour if you create a regular Vue or Nuxt project with Vite. Once it's built though you'll get the single chunk loaded when you do client:load.

[eslamodeh]

Hey @ascorbic,

Thanks for checking this. This was happening to me on production as well. I am using Netlify so I am unable to use npm run preview for this. However, on producution(Netlify), I have inspected this and it was indeed sending different requests to load the other components.

[ascorbic]

You can run locally with the Netlify CLI: netlify serve, or (better) see if you can reproduce the same with the node adapter. Can you create a repro that does exhibit this in prod? The Stackblitz one is behaving as expect, so isn't a valid reproduction.

[github-actions]

Hello @eslamodeh. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[eslamodeh]

Hey @ascorbic,

I have tried to replicate this in a new GitHub repository but unfortunately have failed. However, I have replicated(exact copy paste of the code) between two environments and check this:

New environment(as we expected):

My old environment:

The only difference between new and old environment is that the old environment(or the current code base I have) got plenty of Vue files.

Thus, I am suspecting those 3 JS files being exported because Vue somehow noticed many files and decided to export them?

I am quite unsure but would be really great If have a large code base could potentially be an issue here?

For clarity, here is the following code structure:

src/pages/index.astro:

---
import FullScreenHero from '@src/components/theme/Hero/FullScreen.astro';
---

<FullScreenHero title="My title"
      description="My description"
      primary_cta_text="My CTA"/>

src/components/theme/Hero/FullScreen.astro:

---
  interface Props {
    title: string,
    description: string,
    primary_cta_text?: string,
    sub_hero?: boolean
  }

  import HeroElement from './FullScreen.vue'
  const props = Astro.props as Props
---

<HeroElement client:load {...props} />

src/components/theme/Hero/FullScreen.vue:

<script setup>
import H1 from "@src/components/elements/H1.vue";
import P from "@src/components/elements/P.vue";
</script>

<template>
  <div>
    <div class="relative isolate">
      <div class="mx-auto py-32 mt-20">
        <div class="text-center">
          <H1 class="h1 text-balance">{{ title }}</H1>

          <P class="p text-pretty font-medium mt-8">{{ description }}</P>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: false,
    },
    primary_cta_text: {
      type: String,
      required: false,
    },
    sub_hero: {
      type: Boolean,
      required: false,
    },
  },
};
</script>

[ascorbic]

Unfortunately without an isolated repro, this could be anything. If you can't reproduce one from scratch, the next best is to create one be removing stuff from your existing repo until it starts working correctly.