Skip to content

Instantly share code, notes, and snippets.

@avermeulen

avermeulen/AlpineJSwithViteJS.md Secret

Created June 2, 2022 11:31
Show Gist options
  • Save avermeulen/1c09a70c59f062a78d67294b9bc03e9d to your computer and use it in GitHub Desktop.
Save avermeulen/1c09a70c59f062a78d67294b9bc03e9d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AlpineJSwithViteJS.md

AlpineJS with ViteJS

  • Create app using Vite

npm vite create@latest

Follow the prompts:

  • Pick vanilla JS

Change into the folder create.

Do npm install

Next do npm run dev - this will start an development ViteJS instance that will compile your code in the fly.

It will open up automatically in the browser.

If you change some things in main.js and save the file.

Show the text below in the page by replacing the text that is setting #app element with the text below.

document.querySelector('#app').innerHTML = "I 💚 Alpine JS!"

The browser will refresh automatically, after you save the file.

Alpine setup

Small Alpine App

Create your own module

Use npm module

Style your app

Deploy your app

Add 2 files - vite.config.js & deploy.sh
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment