Code Syntax Highlighting In Nuxt

Update: This method is no longer used and I prefer to go with this approach

For displaying code blocks in a markdown editor I chose to use the package vue-markdown-highlight

In a normal vue app the code below would be imported in main.js In a nuxt app this is the way to do it:

1. Create a file in the plugins directory called highlight.js

import Vue from 'vue';
import 'highlight.js/styles/default.css';
import Highlight from 'vue-markdown-highlight';
Vue.use(Highlight);

2. In nuxt.config.js edit the plugins section

plugins: [{ src: '~/plugins/highlight.js', mode: 'client' }];

3. In the vue file where you intend to use highlight

<div v-html="content" v-highlight></div>