https://github.com/nuxt-community/markdownit-module

Markdownit for Nuxt 2
https://github.com/nuxt-community/markdownit-module

Last synced: 4 months ago
JSON representation

Markdownit for Nuxt 2

• Host: GitHub
• URL: https://github.com/nuxt-community/markdownit-module
• Owner: nuxt-community
• License: mit
• Created: 2020-12-29T10:02:15.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-10T20:03:42.000Z (5 months ago)
• Last Synced: 2024-09-11T18:43:23.849Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 148 KB
• Stars: 48
• Watchers: 3
• Forks: 11
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Markdownit for Nuxt 2

[![npm](https://img.shields.io/npm/dt/@nuxtjs/markdownit.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/markdownit)

[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/markdownit/latest.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/markdownit)

Using [markdownit-loader](https://github.com/nuxt-community/markdownit-loader) and [markdown-it](https://github.com/markdown-it/markdown-it)

## Setup

- Add `@nuxtjs/markdownit` dependency using yarn or npm to your project

- Add `@nuxtjs/markdownit` to `modules` section of `nuxt.config.js`

```js

{

  modules: [

    '@nuxtjs/markdownit'

  ],

  // [optional] markdownit options

  // See https://github.com/markdown-it/markdown-it

  markdownit: {

    preset: 'default',

    linkify: true,

    breaks: true,

    use: [

      'markdown-it-div',

      'markdown-it-attrs'

    ]

  }

}

```

## Usage

### Using `.vue` files

**TIP** You can also write Vue logic inside ``!

`hello.vue`:

```html

  # Hello World!

  Current route is: {{ $route.path }}

```

### Using `.md` files

`hello.md`

```md

# Hello World!!

```

`hello.vue`

```html

  


  import hello from '../hello.md'

  export default {

    computed: {

      hello() {

        return hello

      }

    }

  }

```

### Using `$md` to render markdown

`nuxt.config.js`:

```js

{

  modules: [

    '@nuxtjs/markdownit'

  ],

  markdownit: {

    runtime: true // Support `$md()`

  }

}

```

`hello.vue`:

```html

  


export default {

  data() {

    return {

      model: '# Hello World!'

    }

  }

}

```