[{"_path":"/content-mdc","_draft":false,"_partial":false,"_empty":false,"title":"Using Nuxt components in markdown.","description":"A few things I've learned about \"Mark Down Components\" aka \"MDC\".","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For this article I will be using \"Nuxt components\" and \"Vue components\" interchangeably."}]},{"type":"element","tag":"h1","props":{"id":"what-are-markdown-components"},"children":[{"type":"text","value":"What are Markdown Components?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When I first looked into using \"Nuxt Content\" as a headless CMS, my main worry was that I would be prevented from using Vue components inside my markdown files, but those fears turned out to be unfounded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can indeed use vue components inside markdown with an easy syntax. I have however encountered some hurdles that I will now share with you here."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ContentSlot doesn't seem to work"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"forced to go back to the strange vue requirements for component naming"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"encouraged to name component \"ComponentName.vue\" but supposed to use in html like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<component-name />"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"when \"::componentname\" is used in markdown, \"Componentname\" is seen in terminal, leading me to believe it automatically assumes first character capital but can not distinguish past this."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"I have found this to be the correct convention."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"returning to vue standard, lower case with hyphen in markdown \"component-name\" translates to uppercase no hyphen when searching for component file \"ComponentName.vue\""}]}]}]}]},{"type":"element","tag":"quick-aside","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once a content component has been made, using them is easy!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Quick Aside"}]},{"type":"text","value":" component has been called within the markdown file like so:"}]},{"type":"element","tag":"code","props":{"code":"// Start text on same column\n::quick-aside\nText to display\n::\n\n// This won't render properly\n::quick-aside\n    Text to display\n::\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Start text on same column\n::quick-aside\nText to display\n::\n\n// This won't render properly\n::quick-aside\n    Text to display\n::\n"}]}]}]}]},"thumbnail":"/images/nuxt-markdown.png","slug":"content-mdc","author":"Tony Green","draft":true,"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For this article I will be using \"Nuxt components\" and \"Vue components\" interchangeably."}]},{"type":"element","tag":"h1","props":{"id":"what-are-markdown-components"},"children":[{"type":"text","value":"What are Markdown Components?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When I first looked into using \"Nuxt Content\" as a headless CMS, my main worry was that I would be prevented from using Vue components inside my markdown files, but those fears turned out to be unfounded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can indeed use vue components inside markdown with an easy syntax. I have however encountered some hurdles that I will now share with you here."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ContentSlot doesn't seem to work"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"forced to go back to the strange vue requirements for component naming"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"encouraged to name component \"ComponentName.vue\" but supposed to use in html like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<component-name />"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"when \"::componentname\" is used in markdown, \"Componentname\" is seen in terminal, leading me to believe it automatically assumes first character capital but can not distinguish past this."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"I have found this to be the correct convention."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"returning to vue standard, lower case with hyphen in markdown \"component-name\" translates to uppercase no hyphen when searching for component file \"ComponentName.vue\""}]}]}]}]},{"type":"element","tag":"quick-aside","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once a content component has been made, using them is easy!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Quick Aside"}]},{"type":"text","value":" component has been called within the markdown file like so:"}]},{"type":"element","tag":"code","props":{"code":"// Start text on same column\n::quick-aside\nText to display\n::\n\n// This won't render properly\n::quick-aside\n    Text to display\n::\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Start text on same column\n::quick-aside\nText to display\n::\n\n// This won't render properly\n::quick-aside\n    Text to display\n::\n"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:content-mdc.md","_source":"content","_file":"content-mdc.md","_extension":"md"}]