DEV Community

Connie Leung
Connie Leung

Posted on • Edited on

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

#angular #vue #svelte #webdev

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
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode

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

SvelteKit application 

npx sv create fundamental-svelte
Enter fullscreen mode Exit fullscreen mode 
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 npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Angular 19 application 

ng new fundamental-angular
Enter fullscreen mode Exit fullscreen mode 
Select any stylesheet format, I chose SCSS out of habit. Type no to SSR and SSG. cd fundamental-angular npm i ng serve
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • SvelteKit application 
npm install --save-dev --save-exact @iconify/svelte
Enter fullscreen mode Exit fullscreen mode
  • Angular 19 application 
npm install --save-exact @ng-icons/core @ng-icons/materialicons
Enter fullscreen mode Exit fullscreen mode

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()}
Enter fullscreen mode Exit fullscreen mode
  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.

Top comments (0)