An unofficial Notion renderer

A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.

vue-notion was ported to Vue from react-notion (developed by Splitbee 🐝 – a fast, reliable, free, and modern analytics for any team)

This package doesn't handle the communication with the API. Check out notion-api-worker from Splitbee for an easy solution.

_{Created by Jannik Siebert}

🎯 Accurate – Results are almost identical

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

🌎 SSR / Static Generation Support – Functions to work with Nuxt and other frameworks

npm install vue-notion

Check out the demo ✨

The full NotionRenderer API specification is available at docs/API.md.

We can store the API response in a .json file and import it.

<template> <NotionRenderer :blockMap="blockMap" /> </template> <script> import { NotionRenderer } from "vue-notion"; import response from "./load-page-chunk-response.json"; // https://www.notion.so/api/v3/loadPageChunk const blockMap = response.recordMap.block;  export default {  components: {  NotionRenderer,  },  data() {  return { blockMap };  }, }; </script>

A working example using Nuxt can be found inside the example directory.

Check out the Roadmap and upvote issues that you want to see implemented soon.

List of pages that are using this library.

• StorePreviewer
• ...if you're using vue-notion, we'd be happy to feature you here

Most common block types are supported. We happily accept pull requests to add support for the missing blocks.

Please, feel free to open an issue if you notice any missing blocks or anything wrong with existing blocks.

• Jannik Siebert –
• Tobias Lins – react-notion Idea, Code
• Timo Lins – react-notion Code, Documentation
• samwightt – react-notion Inspiration & API Typings
• vue-notion Contributors 💕
• react-notion Contributors 💕