Vue Static Site Generation: Building a Simple Blog

This challenge focuses on implementing static site generation (SSG) within a Vue.js application using TypeScript. You'll create a basic blog where individual post pages are generated as static HTML files at build time, demonstrating a core principle of modern web development for performance and SEO.

Problem Description

Your task is to build a small Vue.js application that displays a list of blog posts and individual post pages. The key requirement is to generate these individual post pages as static HTML files during the build process. This means that when you run your build command, a separate .html file should be created for each blog post, making them directly accessible and highly performant without needing a server to render them on each request.

Key Requirements:

1. Dynamic Routes for Posts: Implement a Vue Router setup that handles dynamic routes for individual blog posts (e.g., /posts/:id).
2. Data Fetching (Simulated): For this challenge, simulate fetching blog post data. You can use a simple array of JavaScript objects representing your blog posts.
3. Static Generation: Configure your Vue build process (likely using Vite with a plugin like vite-plugin-pages or a similar SSG solution) to generate static HTML files for each unique blog post route.
4. List View: Create a component that displays a list of all blog post titles, with each title linking to its corresponding static page.
5. Post View: Create a component that displays the content of a single blog post, fetched based on the route parameter.

Expected Behavior:

• When the application is built, a static HTML file should be generated for each blog post. For example, if you have posts with IDs 1 and 2, you should have _posts_1.html and _posts_2.html (or similar naming convention depending on your SSG tool) in your output directory.
• The / route should display a list of blog post titles.
• Clicking a title should navigate to the specific post's page.
• When accessing a generated static post page directly (e.g., your-domain.com/_posts_1.html), the content should be rendered correctly.

Edge Cases:

• Empty Blog: What happens if there are no blog posts? The list view should handle this gracefully.
• Invalid Post ID: Although we are generating static files, consider how your route handling might react if an invalid ID is somehow accessed (though this is less of a concern for pure SSG where only pre-defined routes are generated).

Examples

Example 1: Basic Blog Structure

Let's assume you have the following simulated blog post data:

interface BlogPost {
  id: string;
  title: string;
  content: string;
}

const blogPosts: BlogPost[] = [
  { id: '1', title: 'My First Post', content: 'This is the content of my first blog post.' },
  { id: '2', title: 'Vue SSG Fun', content: 'Static site generation in Vue is powerful!' },
];

Input: (Simulated data, not direct user input)

Output:

After building, the output directory (e.g., dist/) will contain:

• index.html (for the root page)
• _posts_1.html (or similar, containing the rendered content of "My First Post")
• _posts_2.html (or similar, containing the rendered content of "Vue SSG Fun")

Explanation: The build process iterates through blogPosts, identifies the routes /posts/1 and /posts/2, and generates corresponding HTML files for each. The index.html would contain links like <a href="_posts_1.html">My First Post</a>.

Example 2: List View Navigation

Input: User navigates to the root URL (/) of the deployed static site.

Output: The index.html file is served, displaying:

Blog Posts:
- My First Post
- Vue SSG Fun

When the user clicks "My First Post", they are navigated to _posts_1.html.

Explanation: The index.html page renders the list of posts, dynamically creating links that point to the pre-generated static HTML files for each post.

Constraints

• Vue Version: Vue 3 with the Composition API.
• Language: TypeScript.
• Build Tool: Vite. You are encouraged to use a Vite plugin specifically designed for static site generation in Vue (e.g., vite-plugin-pages with SSG capabilities, or similar alternatives).
• Data Source: Simulate blog post data using a TypeScript array of objects. No actual API calls are required.
• Output Directory: The generated static files should reside in your build output directory (e.g., dist/).

Notes

• You'll need to research and integrate a suitable Vite plugin for static site generation. vite-plugin-pages is a popular choice that can be configured for SSG.
• Consider how your SSG plugin will handle dynamic routes and how you'll map your simulated data to these routes during the build.
• Focus on the core SSG implementation. Styling and advanced features are secondary for this challenge.
• The goal is to understand how to tell your build process to pre-render specific routes into static HTML files.