Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
The contents are from Vue School's . 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 .
SvelteKit application
npx sv create fundamental-svelte
Which template would you like? Choose SvelteKit minimal
Add type checking with TypeScript?
, 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 .
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 .
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.
npm install --save-dev --save-exact @iconify/vue
npm install --save-dev --save-exact @iconify/svelte
npm install --save-exact @ng-icons/core @ng-icons/materialicons
Copy and edit global stylesheet
Update the global CSS styles in
For Sveltkit application, I took this approach to apply the global styles to all pages.
<script lang="ts">
import './global.css';
let { children } = $props();
</script>
{@render children()}
Copy the global styles from to global.css.
Update the global styles in .
We have successfully created the projects, installed the dependencies, and replaced the global styles.
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 .
SvelteKit application
npx sv create fundamental-svelte
Which template would you like? Choose SvelteKit minimal
Add type checking with TypeScript?
, using Typescript syntaxWhat 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 .
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 .
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
- SvelteKit application
For Sveltkit application, I took this approach to apply the global styles to all pages.
- Add routes/+layout.svelte
<script lang="ts">
import './global.css';
let { children } = $props();
</script>
{@render children()}
- Create a routes/global.css
Copy the global styles from to global.css.
- Angular 19 application
Update the global styles in .
We have successfully created the projects, installed the dependencies, and replaced the global styles.