question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A way to pass the whole frontmatter to vue components?

See original GitHub issue

The module allows binding frontmatter props to vue components as documented here: https://content.nuxtjs.org/writing#vue-components. But is there a way to pass all frontmatter data as a single object? I could wrap all data in an extra prop, but would like to avoid unnecessary nesting. I’ve also found out that using doc actually works, like so - <product-content :product="doc"> - but I don’t see it documented anywhere.

What is the recommended way to do this? Thanks

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
NozomuIkutacommented, Feb 4, 2021

@amethystdeceiver

So, to summarize, there seems no legitimate way to achieve your goal: passing all front matter data as a single object.

As I pointed out above, the way you found (i.e. using doc as an attribute value in markdown file) will break when you upgrade version of Nuxt Content module in your app.


Here, again, the current situation is like below:

With Nuxt Content v1.11.1 or below, any attribute values (as string) are evaluated by global eval function inside propsToData function. This means that any attributes whose name is not defined in front matter are evaluated in the scope of propsToData function. In other words, it is possible to get any variable in the scope, not only doc, which I guess was a bug.

As of Nuxt Content v1.12.0, any attribute values (as string) are evaluated inside a function whose this context is doc. This change is to improve reactivity of data (#688). As a result, it became impossible to resolve doc attribute value (as string) to the current document object.


@Atinux @benjamincanac

Do you have any thoughts on this issue?

1reaction
NozomuIkutacommented, May 21, 2021

Let me close this issue sine it has been not active. Please open another issue and refer to this issue as needed. 🙌

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Pass Data Between Components In Vue.js
1. Using Props To Share Data From Parent To Child # ... VueJS props are the simplest way to share data between components....
Read more >
Front-matter defaults in VuePress config - Stack Overflow
I'm trying to switch my documentation site from GitBook to Vuepress and got stuck with front-matter variables.
Read more >
Writing content - Nuxt Content
Learn how to write your content/, supporting Markdown, YAML, CSV and JSON.
Read more >
5 Easy Ways To Pass Info To Vue Components! - YouTube
Vue. js is really easy to pass information to components. There is props, inject/provide, Vuex and more! In this video I discuss the...
Read more >
Frontmatter - VitePress
These variables can be used via the special $frontmatter variable. Here's an example of how you could use it in your Markdown file:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found