Nuxt组件内请求Content模块yaml文件如何实现HRM热重载？

可以实现，该问题的根因如下：
当你在页面层请求content资源时，Nuxt Content 会自动将 content 目录下的对应文件与页面建立依赖绑定，更新projects.yaml时会触发页面级HMR，页面自动重跑fetch逻辑后将新数据通过props传给组件，因此热重载生效。
而组件内默认不会监听content目录的文件变更事件，fetch钩子仅在组件初始化时执行一次，更新yaml后不会自动重拉数据，因此看起来热重载失效。

解决方案 #

在组件内监听Nuxt Content触发的content:update事件，当content目录文件变更时主动重跑数据请求逻辑即可，修改后的ListProjects.vue组件代码如下：

<template>
ul
    li(v-for="project in projects.list", :key="project.title")
        a(:href="project.url") {{ project.title }}
</template>

<script>
export default {
    data() {
        return {
            projects: [],
        }
    },
    async fetch() {
        this.projects = await this.$content('projects').fetch()
    },
    created() {
        // 仅开发环境开启监听，生产环境无需额外处理
        if (process.env.NODE_ENV === 'development') {
            this.$nuxt.$on('content:update', this.refreshProjects)
        }
    },
    beforeDestroy() {
        // 组件销毁前移除监听，避免内存泄漏
        if (process.env.NODE_ENV === 'development') {
            this.$nuxt.$off('content:update', this.refreshProjects)
        }
    },
    methods: {
        async refreshProjects() {
            await this.$fetch()
        }
    }
}
</script>

修改后更新projects.yaml，组件会自动重新请求最新数据，无需通过父组件传参也能正常触发热重载。

内容的提问来源于stack exchange，提问作者user3681