Table Of Contents

# Introduction

Elucidator blog starter is a starter blog built with Vuejs 3, Vite, and Typescript. You can create publish your post just with markdown file. This starter has so many features for develop your own blog and it’s fast ⚡. If you have some experience in vuejs and want to create a personal blog, you can use this starter for create your own blog. If you get bored with this design, you can create your own design. Not to forget, this css framework blog starter was built with WindiCSS (Next generation utility-first CSS framework).

# Features

Elucidator blog starter has several features such as:

• Utilities Vue Composition API using Vueuse
• Document head manager for Vue 3 Vueuse head
• Next generation utility first CSS framework using WindiCSS
• Style with SCSS
• File system based route generator using Vite Plugin Pages
• Auto importing component using Vite Plugin Component
• Markdown with Vue for Vite using Vite Plugin Md
• Access thousands icons as Vue component in Vite using Vite Plugin Icons
• Progress bar like youtube, github, etc using Nprogress
• Code syntax highlighter using Prismjs
• Comment the article using Vue Disqus
• Share your article using Vue Social Sharing
• Typescript support :D
• Dark mode support :D

# Components

In this blog starter, we have several components to easier own your blog, and if you have an idea to add some components, you can make a pull request in this repository on github.

# Article Component

The article component <Article /> is useful for display the article data that you have, and this component has a several properties, you can see this component detail in […]

# Latest Component

This component (<Latest />) is useful for display the latest article you have, and same with article component, this component has a several properties you can use, you can see this component detail in […]

# Share component

This component is useful for share your article to several platform like facebook, twitter, etc. This component would not have been possible without this library Vue Social Sharing.

# Tag component

You can use this component to display tag in the article component, latest component and post component. This component refer to the tag page and display the data of tag that the user click before.

# To Top Button

This button is useful to make the page back to top.

# Pagination

Pagination will paginate your data, you can limit your own data article as you want to paginate your data articles. Example to use this component, you can see here for more detail […].

# Markdown Support

Thanks to Anthony Fu’s Vite Plugin Md, this starter can use markdown file to create your article post. In this markdown you can use your own component in this file, example:

Example image

Example image

# Comment System

Since this starter use disqus for comment system, first you should get the shortname, you can get the shortname from the official website disqus and if you have the shortname, make sure you have to fill the value in the .env file. For more detail, you can read the documentation from Vue Disqus.

For more detail you can see the Vite Plugin Md’s Github reposistory. Not to forget again, thanks to Markdown It Table Of Contents, you can use table of content by fill [[toc]] in the markdown.

# Usage and Installation

# Development

I used pnpm for the package manager, you can adjust with your favorite package manager.

pnpm dev

# Build

pnpm build

After finish the build process, you will see dist folder successfully generated.

# About The Name

Elucidator is a kirito’s sword from the anime Sword Art Online(SAO), and I like that anime, therefore i named this template with Elucidator :D.

# Credit

This starter was heavily inspired by Vitesse.