NuxtVueBlog

BlogiNote — Nuxt Blog Template

By Benbinbin

BlogiNote is a blog and notes theme built on Nuxt Content. It generates a static site from Markdown, JSON, CSV, and other files, and provides reading features such as list pages, full-text search, a tree-style outline, and collapsible headings.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-01View source

What stands out

A quick read of the recorded project description.

Built on the Nuxt Content module, generating static pages from Markdown, JSON, CSV, and other files

Supports MDC syntax, allowing Vue components to be used directly in Markdown

Provides list pages for filtering and querying articles

Full-text search provided by Pagefind

Tree-style article outline drawn as a mind map with D3.js

Collapsible headings to expand or hide subsequent content, making long articles easier to read

Template Details

BlogiNote is a Nuxt theme built on the Nuxt Content module, used to generate a static website from blog posts and notes. Content is driven by Markdown, JSON, CSV, and other files, and pages are generated from these content files.

For writing and reading, the theme supports MDC syntax, allowing Vue components to be used directly in Markdown files. It provides list pages for filtering and querying articles. Full-text search is provided by Pagefind. The article outline is presented as a mind map drawn with D3.js. Headings can be collapsed to expand or hide the content that follows, making long articles easier to read.

For usage, the official recommendation is to start your own project with the companion BlogiNote-Starter-Template starter template. The repository also includes an online demo, an online playground (StackBlitz), and a standalone documentation site. Developers can also build their own templates directly on BlogiNote, for example by adding Remark plugins to extend Markdown syntax or writing Vue components to add custom functionality.

Regarding licensing, the repository uses the MIT license, which permits free use, modification, commercial use, and distribution of this version of the code; when distributing, the copyright notice and the full MIT license notice must be retained. Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses.

NuxtBlog

Is it right for your project?

Use Cases

Building a personal blog written in Markdown
Organizing and publishing structured study notes
Content sites that need full-text search and article outline navigation
Embedding Vue components in Markdown for custom content presentation

Suitable For

Developers using Nuxt and Nuxt Content
People who want a static blog or notes site driven by Markdown and other files
Site authors who need reading features such as full-text search, a tree-style outline, and collapsible headings
People who want to further develop on an existing theme, extend Markdown syntax, or create custom components

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
The official recommendation is to create a project with the BlogiNote-Starter-Template starter template; see the getting started tutorial on the documentation site for specific steps
2
The repository provides an online demo, a StackBlitz online playground, and a standalone documentation site for reference
3
The code uses the MIT license; when distributing, the original author's copyright notice and the full MIT license notice must be retained
4
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses and cannot be judged solely by the code's MIT license

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to this version of the code and does not mean that external services or third-party assets are free.

Must comply with when using

Permits free use, modification, commercial use, and distribution of this version of the code.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

https://github.com/Benbinbin/BlogiNote/blob/main/LICENSE https://github.com/Benbinbin/BlogiNote/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 81 / 100
Technologies: Nuxt · Vue
Website type: Blog

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2024-10-30
Screenshot last checked: 2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 13f3cfa0da99f96524c12ced17f28c734c6b62aefc551702ef4fd7ad952e10ae

2026-10-01T00:34:52.685Z

Source file / repository

[![BlogiNote](./public/cover.jpg)](https://bloginote.benbinbin.com/)

# BlogiNote
BlogiNote is a [Nuxt Theme](https://nuxt.com/docs/guide/going-further/layers) based on [Nuxt Content module](https://content.nuxtjs.org/), it can generate static website to show your blog posts and notes with flexible layouts and multiple optimizations.

:link: [Demo](https://bloginote.benbinbin.com/)

:joystick: [Play Online](https://stackblitz.com/edit/github-qrmhoj)

:pencil: [Starter Template](https://github.com/Benbinbin/BlogiNote-Starter-Template)

:bookmark_tabs: [Documentation](https://bloginote-documentation.vercel.app/)

## Features
:sparkles: Content driving: generate web pages based on markdown, json, csv and more

:sparkles: Vue components in Markdown: with [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc) you can use vue components inside markdown file

:sparkles: List Page: a list page make the filter and query articles more convenient

:sparkles: Full text search: you can search content everywhere powered by [Pagefind](https://pagefind.app/) 🎥 [Demo](https://youtu.be/OotBwk88Y38)

:sparkles: Tree Catalog: you can catch the outline of the article easily with a Mind Map powered by [D3.js](https://d3js.org/) 🎥 [Demo](https://youtu.be/dxR8Oh0a4E4)

:sparkles: Toggle Heading: you can toggle the heading to show or hide the following content, it's so useful to read a long long post 🎥 [Demo1](https://youtu.be/2OVF7ZLpopE) [Demo2](https://youtu.be/U8ylBVHekRM)

:muscle: it will keep evolving to add more features

🎥 More demo please checkout the [Youtube playlist](https://youtube.com/playlist?list=PLqLRbo_6ezAEpy7KjFbXTgjndhJr0M5Zj)

## Usage
Use the [starter template](https://github.com/Benbinbin/BlogiNote-Starter-Template) to build your own project with the BlogiNote theme.

:point_right: You can check out [this tutorial](https://bloginote-documentation.vercel.app/article/tutorial/get-start) for more information.

## Develop
You can also build your own template based on BlogiNote, adding some Remark plugins to extend the markdown syntax, or building some Vue components to add more custom features.

## License

[MIT](./LICENSE)

## Feedback
If you have any problem or suggestion about this project, feel free to open an [issue](https://github.com/Benbinbin/BlogiNote/issues/new) in Github or contact with me by email <a href="mailto:[email protected]">[email protected]</a>

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

alpine-theme

Alpine is a minimalist blog theme built on Nuxt and Nuxt Content, supporting Markdown and MDC syntax with over 30 components from Nuxt Elements.

Nuxt · Blog

bael-template

Bael is a brutalist-style blog template built with Nuxt.js and Vue.js, using Netlify CMS for content management and deploying to Netlify. Content is stored as files in a Git repository and edited through the /admin path.

Nuxt · Blog

bloggrify

Bloggrify is a Nuxt layer that turns Markdown files into a blog site, built on Nuxt Content with preconfigured analytics, newsletter, comments, SEO, RSS, and content components.

Nuxt · Blog

Nuxt_Mkdirs

An open-source directory site template built with Nuxt and Sanity CMS, with three homepage layouts, Google/GitHub OAuth login, Stripe and Creem payment channels, Resend transactional email and newsletter subscriptions, and optional AI auto-fill for submissions.

Nuxt · Blog

nuxt-content-template

An opinionated Nuxt Content template for Markdown blogs, with i18n, dark mode, TailwindCSS, LaTeX formulas, and static generation.

Nuxt · Blog

nuxt3-microcms-blog

A Nuxt3 blog template using microCMS for content and Vuetify3 for the interface, with SSR, TypeScript, and GA4 support.

Nuxt · Blog