Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/braanj/personally
Personally, a simple blog application built using Vue.js version 3.
https://github.com/braanj/personally
axios nested-routes pinia pnpm vite vue-router4 vuejs3
Last synced: 5 days ago
JSON representation
Personally, a simple blog application built using Vue.js version 3.
- Host: GitHub
- URL: https://github.com/braanj/personally
- Owner: braanj
- Created: 2023-10-27T15:36:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-11T11:25:23.000Z (8 months ago)
- Last Synced: 2024-03-11T23:47:22.034Z (8 months ago)
- Topics: axios, nested-routes, pinia, pnpm, vite, vue-router4, vuejs3
- Language: TypeScript
- Homepage:
- Size: 1.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Technical Documentation: Personally
## Introduction
This technical document provides an overview of,, **Personally**, a simple blog application built using Vue.js version 2. The application includes a home page, a category page, and a single article page with a recommended articles section. This document will cover the architecture, components, and key features of the application.
### Application Structure
The application is structured as follows:
- **Home Page**: This is the landing page of the blog, displaying a list of recent articles.
- **Category Page**: Users can filter articles by category on this page.
- **Single Article Page**: This page displays a single article's content, and includes a recommended articles section based on the current article's category.
## Prerequisites
Before diving into the technical details, ensure that you have the following tools and technologies installed:
- Vue.js 3.x
- Node.js and pnpm (Nerformant Node Package Manager)
- A code editor (e.g., Visual Studio Code)
- Basic knowledge of HTML, CSS, and JavaScript
## Project Setup
To create the Vue.js blog app, follow these steps:
1. **Run the application**: Clone this repository and install the packages:
- Clone the project:
```bash
git clone https://github.com/braanj/personally.git
git checkout dev
```
- Install dependencies:
```bash
pnpm install
```
- Run the project:
```
pnpm dev
```
2. **Type-Check, Compile and Minify for Production**
```sh
pnpm build
```
3. **Component Setup**: Create components for the Home Page, Category Page, and Single Article Page.
4. **Routing**: Set up Vue Router to handle navigation between these pages.
5. **Sample Data**: For testing purposes, create sample data in the form of JSON files to represent articles and categories.
6. **Styling**: Style the application using CSS or a CSS framework (e.g., Bootstrap).
7. **Implement Logic**: Implement the logic for displaying articles, filtering by category, and showing recommended articles.
8. **Testing**: Test the application to ensure it functions correctly.
## Components
### Home Page
- **Component Name**: `HomePage`
- **Description**: The Home Page component displays a list of recent articles.
### Category Page
- **Component Name**: `CategoryPage`
- **Description**: The Category Page component allows users to filter articles by category.
### Single Article Page
- **Component Name**: `SingleArticlePage`
- **Description**: The Single Article Page component displays a single article's content and includes a recommended articles section.
## Routing
### Vue Router
- Use Vue Router to define routes for the Home Page, Category Page, and Single Article Page.
```javascript
import Vue from "vue";
import VueRouter from "vue-router";
import HomePage from "./components/HomePage.vue";
import CategoryPage from "./components/CategoryPage.vue";
import SingleArticlePage from "./components/SingleArticlePage.vue";
Vue.use(VueRouter);
const routes = [
{ path: "/", component: HomePage },
{ path: "/category/:category", component: CategoryPage },
{ path: "/article/:id", component: SingleArticlePage },
];
const router = new VueRouter({
routes,
mode: "history",
});
export default router;
```
## Data
### Sample Data
For this sample application, we'll create JSON files (simple API) to store article and category data.
- **articles.json**: Contains information about blog articles, including title, content, category, and ID.
- **categories.json**: Stores a list of categories.
We'll use this data to populate the components with content.
## Styling
We'll style the application using CSS or a CSS framework of our choice. We'll make sure that the styling is consistent across all components and that the user experience is visually appealing.
## Implementation Details
The implementation details for the key features of each component are as follows:
### Home Page
- Fetch the list of recent articles from `articles.json`.
- Display a list of articles with titles and excerpts.
- Implement navigation links to view the full article.
### Category Page
- Fetch the list of categories from `categories.json`.
- Allow users to select a category to filter articles.
- Display a list of articles in the selected category.
### Single Article Page
- Accept a parameter for the article ID in the route.
- Fetch the article content and category from `articles.json`.
- Display the article's title, content, and category.
- Implement a section for recommended articles in the same category.
## Testing
Thoroughly test the application to ensure that all components, routes, and features work as expected. Pay attention to edge cases and potential errors.
## Conclusion
This technical document provides an overview of, **Personally**, a simple Vue.js blog application. By following the steps outlined here, you can create a functional and visually appealing blog app using Vue.js version 2. Remember to continuously improve and expand the app's features to make it more engaging for users.