### Development and Build Commands for Vue Project

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Provides essential npm scripts for managing the Vue project's lifecycle. This includes installing dependencies, starting a development server with HMR, building for production, previewing the build, running type checks, executing unit and E2E tests, and linting code.

```bash
# Install dependencies
npm install

# Start development server (http://localhost:5173)
npm run dev

# Build for production with type checking
npm run build

# Preview production build
npm run preview

# Run type checking only
npm run type-check

# Run unit tests with Vitest
npm run test:unit

# Run E2E tests in development mode
npm run test:e2e:dev

# Run E2E tests against production build
npm run build && npm run test:e2e

# Lint and fix code
npm run lint
```

--------------------------------

### End-to-End Testing with Cypress

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Example of end-to-end tests for a Vue application written using Cypress. The tests cover visiting the app, navigating between different routes ('/', '/about', '/playground'), and verifying content on the page.

```typescript
// cypress/e2e/example.cy.ts
describe('Vue App E2E', () => {
  it('visits the app root url', () => {
    cy.visit('/');
    cy.contains('h1', 'You did it!');
  });

  it('navigates to About page', () => {
    cy.visit('/');
    cy.contains('About').click();
    cy.url().should('include', '/about');
  });

  it('navigates to Playground page', () => {
    cy.visit('/');
    cy.contains('Playground').click();
    cy.url().should('include', '/playground');
  });

  it('tests teleport functionality', () => {
    cy.visit('/playground');
    cy.contains('传送到body中').click();
    cy.get('body').should('contain', '橙某人');
  });
});

// Run E2E tests:
// npm run test:e2e:dev  (with dev server)
// npm run test:e2e      (with production build)
```

--------------------------------

### Vue Component with Typed Props (TypeScript)

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Defines a Vue 3 component using `<script setup>` with TypeScript for typed props. It receives a 'msg' string prop and displays it. This component is designed to be reusable and type-safe.

```vue
<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">
// Define typed props using TypeScript
defineProps({
  msg: String
});
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You've successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
      What's next?
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

<!-- Usage:
<HelloWorld msg="You did it!" />
-->
```

--------------------------------

### Implement Vue 3 Teleport Feature for Dynamic Content Rendering

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Showcases Vue 3's built-in Teleport feature, which allows rendering a component's content into a different part of the DOM tree, outside of its parent component hierarchy. This example dynamically changes the teleport target based on button clicks.

```vue
<!-- src/views/Playground.vue -->
<template>
  <div id="box">
    <p>id选择器</p>
  </div>
  <div class="box">
    <p>class选择器</p>
  </div>
  <div data-box>
    <p>属性选择器</p>
  </div>

  <!-- Teleport content to dynamic target -->
  <teleport :to="target">
    <h2>橙某人</h2>
  </teleport>

  <div>
    <button @click="update('body')">传送到body中</button>
    <button @click="update('#box')">传送到id选择器中</button>
    <button @click="update('.box')">传送到class选择器中</button>
    <button @click="update('[data-box]')">传送到属性选择器中</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // Initial teleport target
    const target = ref('#app');

    // Update teleport target dynamically
    function update(selector) {
      target.value = selector;
    }

    return { target, update }
  }
}
</script>

```

--------------------------------

### Initialize and Mount Vue 3 App with Pinia and Vue Router

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Sets up the Vue 3 application instance, integrating Pinia for state management and Vue Router for client-side routing. It then mounts the application to the DOM. This is the main entry point for the application.

```typescript
// src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";

const app = createApp(App);

// Register Pinia store
app.use(createPinia());

// Register Vue Router
app.use(router);

// Mount to DOM
app.mount("#app");

```

--------------------------------

### Unit Testing Vue Components with Vitest

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Demonstrates unit testing for a Vue component (`HelloWorld.vue`) using Vitest and Vue Test Utils. It includes tests for rendering props and verifying the presence of specific elements like links.

```typescript
// src/components/__tests__/HelloWorld.spec.ts
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import HelloWorld from '../HelloWorld.vue';

describe('HelloWorld', () => {
  it('renders proper message when passed', () => {
    const msg = 'Test Message';
    const wrapper = mount(HelloWorld, {
      props: { msg }
    });

    expect(wrapper.text()).toContain(msg);
  });

  it('contains Vite and Vue links', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Hello' }
    });

    const links = wrapper.findAll('a');
    expect(links.length).toBeGreaterThan(0);
  });
});

// Run tests:
// npm run test:unit
```

--------------------------------

### Create Pinia Store with Composition API

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Demonstrates how to create a reactive state store using Pinia with Vue 3's Composition API. It defines state, getters (computed properties), and actions (methods) for managing application state. This store can be used across different components for centralized state management.

```typescript
// src/stores/counter.ts
import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", () => {
  // State
  const count = ref(0);

  // Getter
  const doubleCount = computed(() => count.value * 2);

  // Action
  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

// Usage in component:
/*
<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";

const store = useCounterStore();

// Access state: store.count
// Access getter: store.doubleCount
// Call action: store.increment()
</script>

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <p>Double: {{ store.doubleCount }}</p>
    <button @click="store.increment()">Increment</button>
  </div>
</template>
*/

```

--------------------------------

### Vite Configuration with Vue Plugin and Aliases

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Configures the Vite build tool for a Vue 3 project. It includes the official Vue plugin and sets up path aliases, specifically mapping '@' to the './src' directory for easier module resolution.

```typescript
// vite.config.ts
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // Enable @ alias for src directory
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

// Development server:
// npm run dev

// Production build:
// npm run build

// Preview production build:
// npm run preview
```

--------------------------------

### Root Vue App Component with Routing

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

The main application component (`App.vue`) that sets up the application layout, includes the `HelloWorld` component, and configures navigation using `vue-router`. It renders child routes via `<RouterView />`.

```vue
<!-- src/App.vue -->
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="@/assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/playground">Playground</RouterLink>
      </nav>
    </div>
  </header>

  <!-- Route component renders here -->
  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }
}
</style>
```

--------------------------------

### Configure Vue Router with Lazy Loading

Source: https://context7.com/jinpengqiong/vue3demo/llms.txt

Defines client-side routes for the Vue application using Vue Router. It includes basic routes and demonstrates lazy loading for route components to enable code splitting and improve initial load performance. Routes are configured with paths, names, and associated components.

```typescript
// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      // Lazy-loaded route component
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/playground",
      name: "playground",
      // Code-splitting for playground route
      component: () => import("../views/Playground.vue"),
    },
  ],
});

export default router;

// Usage in template:
// <RouterLink to="/">Home</RouterLink>
// <RouterLink to="/about">About</RouterLink>
// <RouterView /> <!-- Renders matched route component -->

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.