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

coming soon 🔮 Code Highlighting – Automatic code highlighting with prismjs

coming soon 🌎 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.

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.

• 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 💕