Jun 04, 2020 Parsing Markdown Front Matter on Nuxt.js Extracting front matter from markdown posts using the frontmatter-markdown-loader package on Nuxt.js with ease. April 9, 2020 - 20 min read. We are one step closer to having a statically generated blog powered by markdown but, before deploying, we have to make one extra step. Nuxt, by default, generates only the routes found in the pages/ directory, but it doesn’t generate every dynamic page, only the index. So we have to find a way to make it generate also the routes like. Nuxt Markdown has been deprecated in favour of @nuxt/content. Nuxt Markdown is a simple but highly-configurable Nuxt.js module which allows you to use Markdown files for the content of your website. This makes it the perfect module to port your site over from Jekyll, or another static site generator. Features; Getting. Nuxt Markdown is a simple but highly-configurable Nuxt.js module which allows you to use Markdown files for the content of your website. This makes it the perfect module to port your site over from Jekyll, or another static site generator. I am trying to run a sketch on the canvas element in Nuxt JS but I am having some issues (I am completely new to Vue JS).
This is a quick post to show the different ways we can use to make Vue.jscomponents available inside Markdown content.
And at the same time, see how we can import
.md
files inside Vue.jscomponents.This is possible thanks to the hard work being done onfrontmatter-markdown-loader.
As a starting point, we’ll use the code from the Nuxt.js app weget from following the Quickstart guide for a new Nuxt.js project.
With the app ready, get into its directory and install thefrontmatter-markdown-loader:
Then add a new webpack rule to
nuxt.config.js
, thiswill allow us to import Markdown files:Now let’s create a new
content/blog
directory:Create a frontmattered Markdown file at
content/blog/my-post.md
with this content:Get used to closing tags when using HTML inside Markdown.
§ Globally available component
Create a
components/GlobalComponent.vue
file:To make it globally available, we need to register it in that way.
Create a new plugin for registering global components at
plugins/global-components.js
:Then in
nuxt.config.js
:§ Locally available component
Create a
components/LocalComponent.vue
file:§ Async component
Create a
components/AsyncComponent.vue
file:Let’s take this approach for a spin —Shall we?
For the sake of this PoC, change your
For the sake of this PoC, change your
pages/index.vue
file to this:Launch your dev server with:
Navigate to
http://localhost:3000
and you should see something like this:This is just a stepping stone on my way to writing a full blog systemthat uses mainly Markdown for content, but can include Vue.jscomponents in a painless way.
October 08, 2019
I’ve been playing around with Nuxt lately for prototyping ideas for myself and for clients. I’ve really liked having the ability to bootstrap an app from the command line with a handful of really useful base tools. Nuxt has some goodies that I can take advantage of right off the bat:
- It’s a framework for creating Vue apps that abstracts away the client/server complexities. This means we can use it as a jumping-off point for a new app or to plug into existing APIs.
- A command line that generates a shell app from a starter template, where server-side rendering is built-in for SEO and quick load times.
- Pulling in a server-side framework (if necessary, but it’s not always), a UI framework, a testing framework, linting and prettifying, a library (Axios) for making HTTP requests.
For this project, I wanted a basic markdown blog experience with Vue and Nuxt so that I can have a playground for both.
Here’s how that went and how you can roll your own too. We’ll run through these steps:
- Create a Shell App
- Load Markdown Files
- Show a Blog Post
- Show a List of Posts
- Generate Dynamic Routes for Static Site
And end up with this.
Or if you’re impatient, grab it from the GitHub repo here.
Create a Shell App
Create a shell app from the default Nuxt starter template by running the following from your command line:
yarn create nuxt-app starter-for-nuxt-markdown-blog
Here’s what that output looks like:
After creating the app, check out what the default Nuxt starter template looks like by spinning it up with:
yarn dev
Nuxt Js Markdown Free
Then head on over to http://localhost:3000.
Load Markdown Files
Next, we’ll use the
frontmatter-markdown-loader
package to pull in markdown files from a directory named content
and gain access to markdown frontmatter (metadata about the markdown file, in this case, post metadata like the title, tags, a hero image) for each post.Add the package:
yarn add frontmatter-markdown-loader
Create the content directory:
mkdir -P content/blog
To create the first post, drop this file in
content/blog
.Then create an associated directory for image assets:
mkdir -P assets/images/blog
And add this image to
assets/images/blog
.Now that we have some content, we can extend the webpack config by adding the
frontmatter-markdown-loader
to the build step in nuxt.config.js
:Show a Blog Post
We don’t need to create static pages for each post we have, so instead, we’ll use dynamic routing to pull in the markdown file. Consider the following URL paths:
/blog/2019-09-22-veggies
/blog/:blog_post_title
or
/users/jenna-pederson
/users/:username
In both of these examples,
:blog_post_title
and :username
represent the dynamic part of the route, or the slug.Create the blog directory:
mkdir pages/blog
We’ll create the
blog
directory and add a _slug.vue
file. This _slug.vue
file will be the Vue template for our blog post. In pages/blog/_slug.vue
, add the following basic template:In
asyncData
we’ve imported the markdown file based on the slug value that we get from the params
. Again, the slug is defined by the URL. For instance, the slug for our URL http://localhost:3000/blog/2019-09-22-veggies is 2019-09-22-veggies
, so this will import the 2019-09-22-veggies.md
file and assign the post object to the component’s data.Blender is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, compositing and motion tracking, video editing and 2D animation pipeline. Blender Foundation; Blender Institute. The question of the best 3D program is a matter of taste. If you want to work in a Hollywood movie studio, you will probably have a hard time getting past 3DsMax or Maya, as many studios use them. With Maya, 3DsMax and others some Hollywood productions have been made. But also Blender is getting more and more popular in Hollywood. Blender 3d download. Intrepid Blender daily build users may have already noticed, but a few days ago, Blender 3.0 alpha appeared on the Blender experimental builds download page. While for the moment this new 3.0 build is suspiciously similar to 2.93, the naming shift symbolizes the end of an era - and the start of a new one.
We’re using the
v-html
directive in order to render raw HTML from our markdown. This causes an eslint warning:9:26 warning 'v-html' directive can lead to XSS attack vue/no-v-html
You can read more about XSS vulnerabilities here and here. Be sure you know where your content is coming from — if you’re writing it, know that even third-party UI libraries can create security vulnerabilities. We can get rid this warning of by ignoring it with the
eslint-disable-next-line
line directly above.Now we can point our browser at http://localhost:3000/blog/2019-09-22-veggies and see the post!
Show a List of Posts
The next step is to be able to show a list of blog posts from our home page and be able to navigate to each individual post.
So that we have more than one post to show in our blog post list, add this post to
content/blog
and it’s image to assets/images/blog
.In
pages/index.vue
, we’re going to use Nuxt’s asyncData
method again to load all the blog posts so that we can display them on the page. In the future, we could paginate these or only load in featured posts to display on the home page of the site. We’ll then add a v-for
loop in the template to display the posts.Here we’re loading in all the markdown files in the
content/blog
directory and any subdirectories (as indicated by true
). Then we’re mapping each key (the file name) to its context and anything else we want. In this case, we’re also mapping _path
to the URL path to the post so we can build links later. The context ends up being what frontmatter-markdown-loader loads: attributes (the frontmatter of the markdown file) and html (the markdown compiled to HTML).Now, when we point our browser back to http://localhost:3000/ we should see this:
Generate Dynamic Routes for Static Site
We still have one step left and that is to set up the dynamic routes to work with
yarn generate
, the step that generates a static site for production. In nuxt.config.js
, we’re going generate routes based on the markdown files we have in the content
directory.First, add
const glob = require('glob')
at the top of the file and then define markdownPaths
there as well:Nuxt Js Markdown Key
const markdownPaths = ['blog']
Nuxt Assets
This will be an array of… paths to our markdown files. In our case, we only have one, but you could extend this to be
['blog', 'portfolio', 'photos', 'recipes']
or whatever you need.Then at the bottom of this file, we’ll add this function:
We’ll call that function in the
generate.routes
block. This can be added at the same level as modules
or build
:To test this out, we’ll head back to the command line and run
yarn generate
, which should produce this output:This will generate your site in the
dist
directory. If you’d like to test it out (and you probably should!) before deploying it live, you can also run yarn build
and then yarn start
to start up an HTTP server of the static site in that directory.Hopefully, this gets you started with building a blog using Nuxt and markdown files! You can grab this version of the code from here. I’ll be continuing to update this repo as I build it out more. Maybe we’ll dig into those warnings about “cannot stringify POJOs with symbolic keys” or formatting the date display using Moment.js or even hooking it up to a headless CMS next.
Ready to get started with this as your starter on Netlify right now? You can do that too!