0

I have a ListProjects.vue inside components folder.

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

I also have projects.yaml in content folder

list:
- title: Project 1
  url: https://www.project1.com
- title: Project 2
  url: https://www.project2.com

If I fetch the content of projects.yaml on my index.vue page and pass as props to ListProjects.vue, hot reload works when I update projects.yaml

ListProjects(:projects="projects.list")

But if I just reference ListProjects on my index, and inside ListProjects.vue fetch content, hot reload do not work.

On both cases I fetch content in this way:

export default {
    data() {
        return {
            projects: [],
        }
    },
    async fetch() {
        this.projects = await this.$content('projects').fetch()
    }
}

Question

Is it possible to make hrm work just by fetching the content inside the component?

user3681
  • 125
  • 1
  • 8
  • Does it refresh if you try `this.projects[0]` just below the fetching? – kissu May 18 '21 at 19:24
  • like this? this.projects = await this.$content('projects').fetch() this.projects[0]. do not work. still no refresh when update .yaml – user3681 May 18 '21 at 20:02
  • I don´t if it's the best approach, but when i remove `async fetch() { ... }` from index.vue, HMR when update .yaml file inside content folder works fine. – user3681 May 18 '21 at 23:42
  • Was not meaning that with my example but it does not matter that much. Do you have a github repo for this? I do have an `async fetch` and some `.md` files and it's HMR'ing upon any kind of edit flawlessly. Not sure if it comes down from the fact that you're using pug, yaml or something else. You don't have any error either? You should not have to remove `async fetch`, it's unrelated at least. – kissu May 19 '21 at 00:16
  • i have a [repo](https://github.com/flavionn3681/portfolio) for this project. i forgot to mention i am using nuxt-vite. at this time i leave fetch() just in components and put asyncData on index page. but i have other problem, when update index.vue with any html tag for example i get an error "cannot read property" – user3681 May 19 '21 at 01:04
  • Try removing `nuxt-vite` to see if it helps Webpack track the changes better. Also, what is the context of the error? Where does it come from? Have you debugged it? I've created a boilerplate few time ago, maybe try to run this one with your `.yaml` files for some faster debugging: https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate – kissu May 19 '21 at 01:15
  • i removed nuxt-vite and pug approach (leaving as normal html) but not works. when i create any html tag in index.vue and save, i get this error "Cannot read property ('property name') of null". no more errors to track. the other files are fine. can you check my repo please? – user3681 May 19 '21 at 22:51
  • resuming, what i am doing is load projects.yaml located in content folder inside a component (i dont no if is a best pratice) but this is working! also i want load info.yaml on my index.vue, and again, works! the problem is just HMR on index.vue. in all other files everything works. im using asyncData on page and async fetch() in component – user3681 May 19 '21 at 22:58

0 Answers0