Elucidator blog starter - a starter blog built with Vuejs 3, Vite, and Typescript

Overview

Elucidator blog starter

Blog starter build with Vue 3 + Vite + Typescript

banner-elucidator

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:

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.

  • Articles Component
  • Latest Component
  • Share Component
  • Tag Component
  • To Top Button
  • Pagination

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.

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.

Install with degit

You can install this starter with degit.

pnpm i -g degit
degit satyawikananda/elucidator-blog-starter your-project-name

Working with Docker

Prerequisites

  1. Docker Desktop

You can follow the installation instructions here https://docs.docker.com/desktop/

Run app on docker

  1. Build container
docker-compose up -d
  1. Open your browser and go to
http://localhost:3000
If you want to change the port, see instructions here
  1. Edit manually Dockerfile at line 32
    EXPOSE 3000
  2. Rebuild container with command
    docker-compose up --build
  1. Done, try it!

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.

Contributing

Want this project make better? you can contributing in this project to, contribution are welcome :D

License

Code licensed under MIT License.

Credit

This starter was heavily inspired by Anthony Fu's Vitesse.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


I Gusti Ngurah Satya Wikananda

💻 📖 🎨 🤔 🚧

Ahmad Saugi

💻

Iwan firmawan

💻 📖 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!


forthebadge forthebadge forthebadge

You might also like...
This template should help get you started developing with Vue 3 and Typescript in Vite

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 script setu

This template should help get you started developing with Vue 3, Typescript and Tailwindcss in Vite.

Starter Vue 3 + Typescript + Vite + Tailwindcss This template should help get you started developing with Vue 3, Typescript and Tailwindcss in Vite. T

Vite - Vue 2 starter template using composition-api and windiCSS

Vite ⚡ - Vue 2 starter template This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool calle

A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences.
A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences.

A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences.

Vue3, Vite, and D3.js starter with examples
Vue3, Vite, and D3.js starter with examples

vue-d3-dataviz-starter Project starter to get up and moving quickly, with examples. For Sabine! https://vue-d3-dataviz-starter.netlify.app/ Alternativ

Simple starter with vite-vue-ts and vue-router

vite-vue3-ts-starter use: [-] vue-router (src/router/routes.ts) [-] sass/scss note: router mode: history Vue 3 + TypeScript + Vite This template shoul

这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。 线上预览 vue3.x 版本

Vue 3 + Typescript + Vite + element-plus 脚手架
Vue 3 + Typescript + Vite + element-plus 脚手架

Vue 3 + Typescript + Vite + element-plus 脚手架 最近尝试搭建新出的框架,分享出来。 安装运行 git clone [email protected]:lianmt/vue3-ts-vite-element_plus-template.git cd vue3-ts

fit-vue3-boilerplate: Vue 3 + Typescript + Vite + Pinia + File Based Routing

fit-vue3-boilerplate demo: https://castrix.github.io/fit-vue3-boilerplate/ installation: npm install run development: npm run dev build: npm run bui

Comments
  • Suggest - Create docker container

    Suggest - Create docker container

    Summary

    In some case, I've problem to install this apps when I'm using Mac OS without Docker like this Screen Shot 2021-10-03 at 12 20 47

    We know, if we want to use Vite then Node.js version is >=12.0.0 as mention at the official documentation

    So, I just doing some experiment to using this apps without upgrading my Node.js version and hopefully everyone can use and install this application in many ways.

    Thanks

    enhancement hacktoberfest 
    opened by ifirmawan 4
  • Pagination active is misleading

    Pagination active is misleading

    Screen Shot 2021-10-02 at 07 50 49

    Hi @satyawikananda

    Nice to meet you, I'm really excited to contribute to this repo and I'm very happy if i'm able to fix this issue and create new PR.

    In my point of view, the active pagination looks like give me an information that i'm currently in second page. But, actually we are in first page. I think we need to switch the active color or just flip it, from gray to white. How do you think?

    Looking forward to working closely with you Thank you

    hacktoberfest UI 
    opened by ifirmawan 2
  • chore(ImgBot): optimize images

    chore(ImgBot): optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 18% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /public/pwa-assets/512.png | 176.15kb | 142.83kb | 18.91% | | /public/pwa-assets/192.png | 36.81kb | 31.06kb | 15.62% | | /public/pwa-assets/apple-touch-icon.png | 33.24kb | 28.19kb | 15.20% | | | | | | | Total : | 246.20kb | 202.08kb | 17.92% |


    Black Lives Matter | 💰 donate | 🎓 learn | ✍🏾 sign

    📝 docs | :octocat: repo | 🙋🏾 issues | 🏅 swag | 🏪 marketplace

    opened by imgbot[bot] 1
Owner
Elucidator Project
Create an useful open source projects
Elucidator Project
⚡️Vite Vue, Pinia, vite-ssg, Typescript, eslint,stylelint starter template

A development template for vue3 + vue-router + pinia + typescript + vite-ssg

猴貓 1 Nov 26, 2022
Vue-typescript-starter-project - Vue3, Vuex, Vue-router starter project using typescript

Vue Typescript Starter Project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production

paalan 0 Jan 1, 2022
🐬 A Starter template built on Vite 2.x + Vue 3.x + Typescript

vite-ts-starter ?? A Starter template built on Vite 2.x + Vue 3.x + Typescript. Live demo: Vite TS Starter Environment Support Vue 3.x Node >= 14.18.x

Wisdom 20 Dec 14, 2022
This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS!

Nuxt 3 Starter Kit This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS! We recommend to look at the documentation. Setup M

Ricardo 17 Nov 19, 2022
:star: A Vite 2.x + Vue 3.x + TypeScript template starter

Vite2.x + Vue3.x + TypeScript Starter 在线预览 https://vite-vue3-starter.xpoet.cn

指间的诗意 415 Dec 28, 2022
Starter Vue 3 + Typescript + Vite + Tailwindcss

Starter Vue 3 + Typescript + Vite + Tailwindcss This template should help get you started developing with Vue 3, Typescript and Tailwindcss in Vite. T

Huda Damar 34 Oct 23, 2022
Vite Vue 3 starter with Vuex + Vue Router + Typescript + ESLint + Prettier

vite-vue3-essential-typescript-eslint-starter This template should help get you started developing with Vue 3 and Typescript in Vite. The template use

유안씌 12 Aug 12, 2022
Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀

Vue TypeScript Starter This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>

Yuga Sun 30 Dec 24, 2022
A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS

VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture ├─ publi

null 1 Jun 1, 2022
This template should help get you started developing with Vue 3, Vuetify 3 and Typescript in Vite.

This template should help get you started developing with Vue 3, Vuetify 3 and Typescript in Vite.

Peshang Hiwa 96 Dec 29, 2022