feat(nuxt): server-only components

[danielroe]

🔗 Linked issue

resolvesnuxt/nuxt#11856
closes#5688

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Summary

This PR builds on #5689 to add support for registering and rendering server components with .server.vue suffix (implementing nuxt/nuxt#11856).

Usage

Standalone server components will always be rendered on the server. When their props update, this will result in a network request that will update the rendered HTML in-place.

Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:

exportdefaultdefineNuxtConfig({experimental: {componentIslands: true}})

Now you can register server-only components with the .server suffix and use them anywhere in your application automatically.

| components/
--| HighlightedMarkdown.server.vue

<template><div><!-- this will automatically be rendered on the server, meaning your markdown parsing + highlighting libraries are not included in your client bundle. --><HighlightedMarkdownmarkdown="# Headline" /></div></template>

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[pi0]

Other than small comments, neat work 💯

[pi0]

💯

[nikodunk]

A test-MR is working nicely for us for the new Fedora Linux website, and we can't wait to start using it in production once 3.1 ships. Thanks so much for adding this feature! https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0/-/merge_requests/247