Nitro + Vanilla Custom Elements

This is a Proof of Concept and testing ground for using Nitro and vanilla JS custom elements using my Web Component Base class.

Setting up

Do the following steps to get you started:

1. clone project and go into the directory

git clone https://github.com/ayoayco/nitro-web-components.git

cd nitro-web-components

2. install deps

npm i

3. run the dev server

npm run dev

4. open the browser to https://localhost:3000 (or what the dev server said)

Special directories

src/pages

• file based routing for .html files

src/components

• custom element constructor class files go here (only .js files for now)
• all components are automatically registered using their file names (e.g., a hello-world.js component can be used as <hello-world> element)

Ambitious Goals

We want a way to:

1. create web apps with vanilla custom elements
2. write real .HTML files
3. no frameworks or reactivity libraries on the browser
4. easy server APIs authoring
5. server-side pre-rendering
6. control on when and where JS is downloaded for interactive elements

More info

This project was generated from Nitro starter guide. Look at the Nitro documentation to learn more.