Day 12 - Component Fundamentals with JavaScript Frameworks

Table of Contents

• Component Fundamentals with JavaScript Frameworks
• Create New Projects for the Frameworks
• Copy the Starter Stylesheet and HTML
• Github Repositories

Component Fundamentals with JavaScript Frameworks

On day 12, I started watching the lessons of Vue School's Vue Component Fundamentals with the Composition API Course , completed the lessons and rewrote the demos in Svelte 5 and Angular 19.

The course started with a Coffee Plan Picker and ended with two separate small projects. The small projects are:

1. Build a GitHub User Profile Vue Component
2. Build an Alert Vue Component

In this post, I will describe how I created the new project, deleted the boilerplate codes and copy the global style sheet.

Create New Projects for the Frameworks

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
npm run dev
The application runs at http://localhost:5173.

Angular 19 application

ng new fundamental-angular
Select any stylesheet format, and I chose CSS.
Type no to SSR and SSG.

cd fundamental-angular
npm i
ng serve
The application runs at http://localhost:4200.

Copy the Starter Stylesheet and HTML

Vue 3 application

• Update the global CSS styles in main.css

• Delete boilerplate codes

  • base.css
  • Delete all the components in the components folder

• Copy the html between the <template> tags in App.vue.

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 to global.css.
• Copy the starter HTML to the project
  • Delete app.component.css and `app.component.spec.ts
  • Copy the html to +page.svelte.

Angular 19 application

• Update the global styles in styles.scss.
• Copy the starter HTML to the project
  • Delete app.component.css and app.component.spec.ts
  • Copy the html to app.component.html.
• Update app.component.ts
  • In @Component decorator, set the imports array to [] because we do not need RouterOutlet.

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

Github Repositories:

• Vue 3: https://github.com/railsstudent/intro-vue3-components
• Svelte 5: https://github.com/railsstudent/intro-svelte-components
• Angular 19: https://github.com/railsstudent/intro-angular-components

I have a Angular Signal course at https://courses.techstacknation.com/. The first chapter is free and it is enough to build modern Angular application using the Signal API.