Astro/Vite fails to properly mount Vue

[kcole93]

trafficstars

After installing astro-netlify-cms and adding a basic config entry in astro.config.mjs, Vue components failed to render as the Vue instance was seemingly not being properly mounted.

Fails to render Vue components

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    mdx(),
    sitemap(),
    vue(),  // Vue integration declared before NetlifyCMS
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'master'
        },
        collections: [
          {
            name: 'posts',
            label: 'Blog Posts',
            folder: 'src/pages/blog',
            create: true,
            delete: true,
            fields: [
              { name: 'title', widget: 'string', label: 'Post Title' },
              { name: 'body', widget: 'markdown', label: 'Post Body' },
            ],
          },
        ]
      }
     }),
  ],
});

Properly renders Vue components

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    mdx(),
    sitemap(),
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'master'
        },
        collections: [
          {
            name: 'posts',
            label: 'Blog Posts',
            folder: 'src/pages/blog',
            create: true,
            delete: true,
            fields: [
              { name: 'title', widget: 'string', label: 'Post Title' },
              { name: 'body', widget: 'markdown', label: 'Post Body' },
            ],
          },
        ]
      }
     }),
     vue(),
  ],
});

I'm not sure if this is an issue specific to the Astro-Netlify-CMS integration, or if it's on the Astro / Astro Vue integration side of things. However, it was difficult to figure out the cause other than that it having occurred after setting up Astro-Netlify-CMS.

In case it helps to identify the source, here's the error messages I was getting.

When rendering Vue components without a client directive:

[plugin:vite:vue] Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)

When they are passed a client:only directive:

Vue warn: Component is missing template or render function

Perhaps it's worth mentioning in the installation / config instructions that this can be resolved by declaring the Astro-Netlify-CMS integration prior to Vue.

[kcole93]

Here's a minimal reproduction on Stackblitz

[delucis]

Thanks for the detailed bug report @kcole93!

I'm wondering if this is due to this integration also installing @astrojs/react. 🤔 I'll try to take a look this week to see what's going on.

[yacosta738]

I have the same issue with Vue components

[kcole93]

Hi Chris, just a heads up that someone else in the Astro discord came across a similar issue with weird Vue errors that were fixed when the order of declaring Vue in astro.config.mjs is changed, so I think it's safe to say that the issue doesn't rest with the NetlifyCMS integration.

See Issue 4994 in the Astro repo.

[delucis]

Thanks for the heads up @kcole93 — appreciate it! In that case I think we can close this issue.

If anyone else finds themselves here, looking for a quick solution: try moving vue() after NetlifyCMS() in your integrations array.