mcfly/README.md
2023-10-09 16:21:33 +02:00

1.4 KiB

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.

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. server-side pre-rendering
  5. control on when and where JS is downloaded for interactive elements

Special directories

1. src/pages

  • file based routing for .html files
  • directly use custom elements (no registry maintenance needed)

2. 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)

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
  1. install deps
npm i
  1. run the dev server
npm run dev
  1. open the browser to https://localhost:3000 (or what the dev server said)

More info

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