Vue 3 with TypeScript and Vite how to install and structure of .vue component with life cycle Vue hooks.
Vue 2 is outdated version of Vue framework. Vue 2 reached End of Life (EOL) on December 31st, 2023.
More then 4 years is issued Vue 3 version and more then 3 years we have its stable npm entities.
I am developer with big experience with Angular, where TypeScript is just usual norm approach, it helps to catch bugs in the code and to avoid a lot of types errors, its extensions in WebStorm and Visual Studio Code helps to write a good maintanable quality code.
So I like to use in my projects Vue 3 with Typescript. Its not a wide-used approach but it is totally working scheme and quite advanced. Vue 3 works with TypeScript fine.
Also I don’t like this verbose Vue approach with all these verbose lifecycle hooks. I prefer in creating Vue 3 Apps with Typescript the syntax with <script setup lang=”ts”> you will see further:
How to install Vue 3 with Typescript and Vite
For running this commands you have to have in your PC or laptop Node.js version not less then 18.17.0 version, but better higher, something like 20.11.1 or later.
npm create vue@latest
create-vue@3.10.4
Ok to proceed? (y)
I press y, and the Vue 3.10.4 version installation is started.
Then I have to answer to following questions and choose required just for my this current project approapriate options – usually in Apps I need TypeScript for less bug development, I don’t need JSX support, because it’s better for development of React projects, usually my Apps have some pages with URLs so I need Vue Router, Pinia as simple state manager, Vitest is simple comfortable tool for unit tests, sometimes in complicated complex projects for health or auto-moto fields I need end-to-end playwright tests, eslint and prettier are good for guaranting good quality of the code, Vue DevTools is required for debugging store Pinia and another pieces of Vue 3 with TypeScript code base:
Vue.js – The Progressive JavaScript Framework
√ Project name: … vue-project
√ Add TypeScript? … No / Yes
√ Add JSX Support? … No / Yes
√ Add Vue Router for Single Page Application development? … No / Yes
√ Add Pinia for state management? … No / Yes
√ Add Vitest for Unit Testing? … No / Yes
√ Add an End-to-End Testing Solution? » Playwright
√ Add ESLint for code quality? … No / Yes
√ Add Prettier for code formatting? … No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in C:\LEARNING\Vue3TypeScript\vue-project…
Done. Now run:
cd vue-project // here can be any name given to the project by you. In this case I didn’t change this default name of Vue App.
npm install
npm run format
npm run dev
As the result we will have Vue 3 TypeScript App with Vite because Vite for current date of 01 September 2024 is default bundler in Vue.
This is the structure of Vue App now after installation process:
As you see we have in structure View folder where I place the whole logic pages like Home, ItemCard, Cart. These pages have their own URL written in routes.
Also we have there Components folder where I place reusable in App components like Buttons, Item, Forms whatsever what is used in several places with slight differences which are defined by props.
But the goal of this article to show you the structure of usual View or Component .vue component or page file which have .vue extension, here it is a bare structure:
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>
In template we should have as least one parent element in other case we will get an error that there is no content in template.
<style></style> tag is optional – it could be in the .vue file or not. But we should for proper coding add scoped attribute to <style scoped></style> for not mess all styles to be common used in project but related just to this current .vue file.
<script setup lang=”ts”></script> is here the most important part because it’s responsible for logic of .vue component. And this syntax gaves us very simple writing of vue logic withot any verbose workarounds. Here is the example of simple .vue script logic with life cycle Vue 3 hooks:
HomeView.vue component:
<script setup lang=”ts”>
import {
onBeforeMount,
onBeforeUnmount,
onBeforeUpdate,
onMounted,
onUnmounted,
onUpdated,
type Ref,
ref,
type UnwrapRef
} from ‘vue’
const counter: Ref<UnwrapRef<number>> = ref(0);
// onBeforeMount – called before the component is mounted
onBeforeMount((): void => console.log(‘Before mount hook’));
// onMounted – called after the component is mounted
onMounted((): void => {
counter.value++
});
// onBeforeUpdate – called before the component updates (when reactive data changes)
onBeforeUpdate((): void => {
console.log(‘Component is about to update’);
});
// onUpdated – called after the component has updated (when reactive data changes)
onUpdated((): void => {
const updatedStep = 5;
incrementCounter(updatedStep);
console.log(‘Component has been updated’);
});
// onBeforeUnmount – called before the component is unmounted
onBeforeUnmount((): void => {
counter.value = 0;
console.log(‘Component is about to be unmounted’);
});
// onUnmounted – called after the component has been unmounted
onUnmounted((): void => {
console.log(‘Component has been unmounted’);
});
const incrementCounter = (step: number): number => counter.value += step;
</script>
<template>
<section>
<div class=”counter”>
<p>{{ counter }}</p>
</div>
</section>
</template>
<style scoped>
.counter {
display: flex;
justify-content: center;
align-items: center;
}
.counter p {
color: #942929;
font-size: 2rem;
}
</style>
Here is the repository with Vue 3 TypeScript TS setup with Vite bundle
Author: Tetiana Nazarova
