Nuxt 3 Notion

Table of contents

• Front-end Example (Nuxt)
• Back-end Example (Notion)
• Documentation
• Stack
• Setup
• Development Server
• Production

Front-end example

This app is rendering a notion page, which you can see here.

Back-end example

How this page looks on Notion you can find here.

Stack

Documentation

Look at the Nuxt 3 documentation, Tailwind documentation and Notion API documentation to learn more. This application is also using DaisyUI, a TailwindCSS component library.

Setup

1. Clone this repository

git clone https://github.com/egrzeszczak/nuxt-3-notion

2. Create an .env file in the root folder

NOTION_ACCESS_TOKEN="your-integration-access-token"
NUXT_PUBLIC_NOTION_ROOT_PAGE="page-you-want-to-render"

3. Delete layouts/ folder

4. Replace the existing /pages/index.vue file with:

<script setup>
	const config = useRuntimeConfig();
	navigateTo(`/page/${config.notionRootPage}`);
</script>

5. Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npx nuxi dev

Production

Build the application for production:

npx nuxi build

Locally preview production build:

npx nuxi preview

Checkout the deployment documentation for more information.

Roadmap

Check what is planned for this project here