
Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
vue-notion
Advanced tools
An unofficial Notion renderer
๐ฏ Accurate โ Results are almost identical
๐จ Custom Styles โ Styles are easily adaptable. Optional styles included
๐ฎ Syntax-Highlighting โ Beautiful themeable code highlighting using Prism.js
๐ SSR / Static Generation Support โ Functions to work with NuxtJS and other frameworks
Warning This is the documentation for the upcoming Vue 3 compatible release of vue-notion. For the Vue 2 version, check out the vue2 branch.
npm install vue-notion@3.0.0-beta.1
Check out the /example
folder for a full working example using Nuxt 3.
Note Potentially outdated -- 3.0.0 docs are a work-in-progress
NotionRenderer
: docs/
docs/
docs/
docs/
Check out a full working demo at vue-notion.now.sh โจ The code for the demo is in
example/
.
These examples use a simple wrapper around the notion-api-worker
to access the Notion page data.
It is also possible to store a page received from the Notion API in .json
and use it without the async/await
part.
Use the
getPageBlocks
andgetPageTable
methods with caution! They are based on the private Notion API. We can NOT guarantee that it will stay stable. The private API is warpped by notion-api-worker. If you use these methods a lot, please consider hosting you own instance, as described indocs#notion-api
.
This example is a part of example/
and is hosted at vue-notion.now.sh/vue.
<template>
<NotionRenderer :blockMap="blockMap" fullPage />
</template>
<script lang="ts">
import { NotionRenderer, getPageBlocks } from "vue-notion";
export default {
components: { NotionRenderer },
data: () => ({ blockMap: null }),
async created() {
// get Notion blocks from the API via a Notion pageId
this.blockMap = await getPageBlocks("8c1ab01960b049f6a282dda64a94afc7");
},
};
</script>
<style>
/* optional Notion-like styles */
@import "vue-notion/src/styles.css";
</style>
This example is a part of example/
and is hosted at vue-notion.now.sh/nuxt.
The page assumes a Nuxt plugin in ~/plugins/vue-notion.js
that registers via the useNuxtApp
hook.
<template>
<NotionRenderer :blockMap="blockMap" fullPage />
</template>
<script lang="ts" setup>
const { $notion } = useNuxtApp();
// use Notion module to get Notion blocks from the API via a Notion pageId
const { data: blockMap } = useAsyncData("page_nuxt", () =>
$notion.getPageBlocks("8c1ab01960b049f6a282dda64a94afc7")
);
</script>
<style>
@import "vue-notion/src/styles.css"; /* optional Notion-like styles */
</style>
List of pages that are using this library.
vue-notion
, we'd be happy to feature you hereMost common block types are supported. We happily accept pull requests to add support for the missing blocks.
Block Type | Supported | Notes |
---|---|---|
Text | โ Yes | |
Heading | โ Yes | |
Image | โ Yes | |
Image Caption | โ Yes | |
Bulleted List | โ Yes | |
Numbered List | โ Yes | |
Quote | โ Yes | |
Callout | โ Yes | |
Column | โ Yes | |
iframe | โ Yes | |
Video | โ Yes | Only embedded videos |
Divider | โ Yes | |
Link | โ Yes | |
Code | โ Yes | |
Web Bookmark | โ Yes | |
Toggle List | โ Yes | |
Page Links | โ Yes | |
Cover | โ Yes | Enable with fullPage |
Equations | โ Yes | |
Checkbox | โ Yes | |
Simple Tables | โ Yes | |
Databases | โ Not planned | |
Table Of Contents | โ Not planned |
Please, feel free to open an issue if you notice any important blocks missing or anything wrong with existing blocks.
Jannik Siebert โ vue-notion Code
Dominik Sobe โ vue-notion Inspiration, Debugging
Tobias Lins โ react-notion Idea, Code
Timo Lins โ react-notion Code, Documentation
samwightt โ react-notion Inspiration & API Typings
Big thanks to NuxtJS for being awesome!
MIT ยฉ Jannik Siebert
FAQs
A Vue renderer for Notion pages
The npm package vue-notion receives a total of 1,345 weekly downloads. As such, vue-notion popularity was classified as popular.
We found that vue-notion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.ย It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
Research
Security News
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.
Research
Security News
Malicious npm packages posing as developer tools target macOS Cursor IDE users, stealing credentials and modifying files to gain persistent backdoor access.