Integrated Vue App

This section of the site is to allow for a standalone /app/ folder that can share some config with the rest of the site as needed, but also has it's own routing, components etc

This app assumes a vercel installation where serverless functions are available at /api/, with the local site running through vercel CLI using vercel dev

ENV variables

The API is designed to be fairly generic and portable by changing API keys to different services:

• Airtable stores the user & app data, connect to your Airtable by setting AIRTABLE_TOKEN and AIRTABLE_BASE
• Javascript Web Tokens are used to store login sessions. The AUTH_SECRET is used to encode and decode these.
• Passwords for users in airtable are salted MD5 hashes. AUTH_SALT is the salt used for this.

Build Order

This is still part of 11ty, so yarn dev or vercel dev at the top level (i.e running the whole site) will also watch these files too.

styles/app.css is the main stylesheet. This automatically includes the vue single-file-component scoped styles which esbuild will build out to dist/app.css.

So esbuild watches js/app.js and the entire Vue app for any css. It outputs that to dist/app.css. Next, 11ty & postcss is watching styles/app.css, which imports all the other styles, including an @import to dist/app.css (the Vue css) Finally, we include dist/app.js and dist/app.mins.css

NOTE that 11ty config creates a passthrough copy to the _site/app/ folder, so that's where they are publically accessible.

File Structure

src/app.js and src/app.css are the entry points. Everything else is imported from those. Afterwards, they will generate dist/app.min.js and dist/app.min.css respectively.

NOTE that dist/ is relative to the app/ folder, so is app/dist/app.min.xx dist/ is meant as a temporary compiliation directory, any edits shoudl be made to files in src/, the build config shuld do the rest.

Tailwind + VUE

The way the bundling is configured, you can use tailwind within css with .classname{@apply bg-[red] md:bg-[blue];}, or within the vue templates as <div class="bg-[red] md:bg-[blue]"></div>

You can even use @apply within scoped styles in vue components:

 src/componentns/Item.vue
<style scoped>
	.item{
		@apply bg-[red] md:bg-[blue];
	}
</style>

You can EVEN use nesting inside scoped styles, but — beware - nesting needs to apply to items that are within the same .vue file:

 src/componentns/Item.vue
<template>
	<div class="item">
		<div class="inner">
			<!-- CAN BE STYLED WITH NESTING -->
		</div>
		<div class="component">
			<SomeOtherComponent /> <!-- CANNOT BE STYLED WITH SCOPED NESTING -->
		</div>
	</div>
</template>
<style scoped>
	.item{
		@apply bg-[red] md:bg-[blue];

		& .inner{
			@apply bg-[gray]; /* This works as inside the vue scope */
		}

		& .component svg{
			/* Scoped attribute won't work as the scope is lost down the tree */
		}
	}
</style>

Example Apps

User login & registration with Pinia + Vue 3: https://stackblitz.com/edit/vue-3-pinia-registration-login-example Demo Vue3 + Pinia App: https://stackblitz.com/github/piniajs/example-vue-3-vite JSON Diffing & Patching: https://github.com/benjamine/jsondiffpatch?tab=readme-ov-file JSON Database: https://www.npmjs.com/package/node-json-db