Vue (TypeScript)

You should create a main Vue component named App.vue as the entry point of your Vue application. Your Vue code should be linted using ESLint with the recommended configuration for Vue.js and TypeScript.

Entry file

The entry file for this template must be one of the following: index.ts or main.ts. The first one present is used as the entry point.

Version

Running on Node.js v20.0.0

Supported languages

TypeScript

Testing framework

Jest

Special reminders and implementation details

• Vue Testing Library, a library that is built on top of @vue/test-utils, the official testing library for Vue.

Example with Vue Testing Library:

import "@testing-library/jest-dom/jest-globals";

import { render } from "@testing-library/vue";
import { describe, expect, it } from "@jest/globals";
import { screen } from "@testing-library/dom";

import HelloWorld from "./App.vue";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(HelloWorld);
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Remember to always keep your components modular and make use of Vue's reactivity, computed properties, and directives for efficient data handling and DOM manipulations. Use TypeScript types and interfaces for better type safety.

Included libraries

• @babel/preset-env
• babel-jest
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• @testing-library/vue
• @vue/compiler-sfc
• @vue/vue3-jest
• jest-transform-stub
• typescript

Write-tests challenges

This template supports write-tests challenges. The reference solution is already written and you write the tests: they must pass on the reference solution and catch every hidden buggy variant. Test runs your tests against the reference solution only, while Verify tests and Submit also run them against the hidden buggy variants. Read Solving a write-tests challenge for the full flow.

• Test runner: Jest (ts-jest) + @testing-library/vue
• Same setup as Vue, with *.spec.ts test files and <script lang="ts" setup> components.
• For v-model inputs use await fireEvent.update(input, value): it sets the value and fires the right event in one call.

A complete example is in Write-tests examples by template.

How to debug

Debugging Vue.js 3 applications with TypeScript is crucial for ensuring stability and correctness. Utilizing console.log() statements can be a simple yet effective method to debug Vue applications.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Locate the Vue component or method where you suspect the issue lies.

2. Insert console.log() Statements: Introduce console.log() statements before and after the code segment you want to inspect, logging relevant data such as component state, props, or method invocations.

3. Check the Results Output of your tests

4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

5. Analyze the Output: Examine the logged data to gain insights into the flow of your Vue application and identify any unexpected behaviors or errors.

Here's an example of how to use console.log() for debugging in Vue.js 3 with TypeScript:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const count: Ref<number> = ref(0);

const increment = (): void => {
  console.log("Button clicked!");
  count.value++;
};

console.log("Component initialized."); // Log component initialization
</script>