Astroではhtmlタグまでを含んだLayoutを自分で定義してページなどで呼び出すことになるが、そのLayoutの外側にタグを書いてしまうと、出力されるhtmlソースでhtmlタグよりも前にいくつかのタグが挿入されることで、headタグの中身が正しく認識されず<code>&lt;meta charset="UTF-8" /&gt;</code>の指定が無効になり文字化けすることが分かった
再現条件をいくつか試したが、かなり限定的なケースでのみ発生する模様
<div class="code-block-container">
<div class="code-block-filename-container">BaseLayout.astro</div>
<pre class="language-html"><code class="language-html">&lt;!doctype html&gt;
&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;slot /&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">Layout.astro</div>
<pre class="language-jsx"><code class="language-jsx">import BaseLayout from '~/layouts/BaseLayout.astro'
import Foo from '~/components/Foo.vue'
---

&lt;Foo client:load /&gt;

&lt;BaseLayout&gt;
 &lt;slot /&gt;
&lt;/BaseLayout&gt;
</code></pre>
</div>

AstroでLayoutの外にタグを書くと文字化けする

Discussion