Vue
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.
Version
Running on Node.js v20.0.0
Supported languages
Javascript
Testing framework
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:
js
import { render, screen } from '@testing-library/vue'
import App from './App.vue'
describe('App', () => {
test('Should display "Hello World!"', () => {
render(App);
expect(screen.getByText("Hello World!")).toBeInTheDocument();
})
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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.
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
How to debug
Debugging Vue.js 3 applications 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
Identify the Problem Area: Locate the Vue component or method where you suspect the issue lies.
Insert
console.log()
Statements: Introduceconsole.log()
statements before and after the code segment you want to inspect, logging relevant data such as component state, props, or method invocations.Check the Results Output of your tests
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.
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:
vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
console.log('Button clicked!'); // Log button click
count.value++;
};
console.log('Component initialized.'); // Log component initialization
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19