Styling Nuxt Content

Nuxt content is an awesome module that makes content creation easy for bloggers, writers, etc. It has some nice features to play with. Moreover, it's easy to give styling :)

In this article, I'll show Nuxt content's live editing feature as well as some styling practices to keep in mind.

Without further ado, let's dive into the first part.

Nuxt Live Editing Feature

Nuxt content module comes with a cool Live Editing feature. This allows us to modify our displayed nuxt content directly on the web page. All you need to activate this feature is by double clicking on your content, and a text area filled eith your content's markdown file will appear, ready to be modified. Any changes made during live editing will automatically update your original file.

This feature is set to true by default in nuxt.config.js.

// default setting in nuxt.config.js
export default {  
  content: {  
    liveEdit: true  
  }  
}  

Live editing is nice for development purposes. Make sure to disable this when you deploy your project. You don't want anyone other than you have the ability to modify your content, except if that's what you want to achieve.

Content Container

Before you style your content, have a look on your developer's console on your Firefox (or Chrome). You can see that your content is wrapped inside the nuxt-content class. However, if you have live editing set to true, your nuxt-content class will be wrapped by another nuxt-content-container class.

In my experience working with nuxt content's live editing feature, I found that nuxt-content-container class serves as a text-area which is toggled on and off by double clicking the container and clicking outside of the container, respectively. Without this class, the text-area toggle won't work at all. As you may have guessed, this means nuxt's liveEdit setting controls whether or not nuxt-content-container should be added to wrap your content.

Styling Your Content

Now that you know the 2 wrapper classes for your content, let's look at how we can style your content body.

To style your content with live editing set to true, you have to use the ::v-deep directive to access your nuxt-content class inside nuxt-content-container.

.nuxt-content-container ::v-deep .nuxt-content {  
  // your style
}

.nuxt-content-container ::v-deep .nuxt-content p {  
  // your style
}

.nuxt-content-container ::v-deep . nuxt-content img {   
  // your style
}

Want to make your styles nested and neat? Check out how to use SCSS in your Nuxt project in this article.

Your content will be styled just like you would expect. However, when you turn off live editing featur from nuxt.config.js file, you will also lose all your content styling.

"Wait, what?"

Don't freak out just yet. Remember that you select your nuxt-content class by having nuxt-content-container pointing it? And when you disable the live editing feature, nuxt-content-container class doesn't exist.

It's easy to fix this problem. All you need to do is delete all nuxt-content-container class and the ::v-deep directive from each nuxt-content class in your css file. Recompile your project, and you'll see that your content is now styled the way it used to be :).

Wrapping Up

Nuxt content module comes with live editing feature for intuitive content modification on the fly. It works by adding nuxt-content-container class as a textarea to modify your nuxt-content. Content styling can be achieved by selecting nuxt-content-container class and adding ::v-deep directive before defining your nuxt-content class selector. To fix styling problem after turning off the live editing feature, clear all nuxt-content-container class selector as well as the ::v-deep directive on your nuxt-content class.