Day 1 – Create a new projects, dependencies, and global CSS styles

by
Reading Time: 2 minutes

Loading

The contents are from Vue School’s Vue.js 3 Fundamental with the Composition API. The Vue app was written in TypeScript + Composition API, and then it was ported to Angular 19 and Svelte 5 to get a first-hand experience of their similarities and differences.

This is a simple shopping cart that adds and deletes items from it.
Create a new application.

Vue 3 application

npm create vue@latest

Entered the application name to fundamental-vue
Checked TypeScript, Prettier, Eslint in the menu
Chose no to 0xlint 

cd fundamental-vue3
npm i
npm run dev

The application runs at http://localhost:5173.

SvelteKit application

npx sv create fundamental-svelte

Which template would you like?  Choose SvelteKit minimal
Add type checking with TypeScript? Yes, using Typescript syntax
What would you like to add to your project? Choose prettier, eslint, sveltekit-adapter
sveltekit-adapter: Which SvelteKit adapter would you like to use? Auto
Which package manager do you want to install dependencies with? npm

cd fundamental-svelte
npm i
ng serve

The application runs at http://localhost:5173.

Angular 19 application

ng new fundamental-angular

Select any stylesheet format,  I chose SCSS out of habit.
Type no to SSR and SSG.

cd fundamental-angular
npm i
ng serve

The application runs at http://localhost:4200.

Install Icon library

I would like to use icons on the buttons to make the demo more interesting. I installed Iconify for Vue and Svelte and ng-icons for Angular.

  • Vue 3 application
npm install --save-dev --save-exact @iconify/vue
  • SvelteKit application
npm install --save-dev --save-exact @iconify/svelte
  • Angular 19 application
npm install --save-exact @ng-icons/core @ng-icons/materialicons

Copy and edit global stylesheet

  • Vue 3 application

Update the global CSS styles in main.css

  • SvelteKit application

For Sveltkit application, I took this approach to apply the global styles to all pages.

  1. Add routes/+layout.svelte
<script lang="ts">
   import './global.css';
   let { children } = $props();
</script>

{@render children()}
  1. Create a routes/global.css

Copy the global styles from global.css to global.css.

  • Angular 19 application

Update the global styles in styles.scss.

We have successfully created the projects, installed the dependencies, and replaced the global styles.