j-wil / pocket-nuxt

Single binary full stack Nuxt3 PocketBase application

Quick Demo

This demo allows you to login and see pocketnuxt in action. This is hosted on a small droplet in DigitalOcean using systemctl.

Pocket Nuxt

Nuxt3 and PocketBase delivered in a simple binary that can run anywhere.

This is achieved by compiling the Nuxt app into a static hosted folder and then using Go to serve the static files and pocketbase api.

//go:embed all:.output/public
var public embed.FS

Make it your own by extending Pocketbase and adding your app to the app folder.

Stack

• PocketBase
• Nuxt3
• PrimeVue
• PrimeIcons

Run Locally

This will run both a Nuxt3 dev server with hot reload and a pocketbase instance with a authentication and an api ready to go.

Clone the project

  git clone https://github.com/j-wil/pocket-nuxt

Go to the project directory

  cd pocket-nuxt

Install dependencies

  yarn install

Start the server

  yarn dev

URL	Function
localhost:8090/_/	pocketbase admin setup and log
localhost:8090/api/	pocketbase api
localhost:3000/	nuxt3 dev server

From there build your nuxt app as normal. Follow the pocketbase docs for more info on how to use pocketbase.

Deployment

This will create a single binary containing Nuxt and PocketBase for deployment.

  yarn build:prod

  ./pocketnuxt serve --http "yourdomain.com:80" --https "yourdomain.com:443"

https://pocketbase.io/docs/going-to-production/ for more examples.

Acknowledgements

• PocketBase

pocket-nuxt's Issues

this doesnt compile with windows

pocketbase url not reactive

Hi there,

Thanks for this project :)

The url to pocketbase in https://github.com/j-wil/pocket-nuxt/blob/main/app/app.config.ts#L4 doesn't seem to be as dynamic as it should be.
When refreshing the site (F5), the pocketbase url will be http://localhost:8090/api even though the app may run under a domain (e.g. www.pocketnuxt.com).
When navigating through the SPA e.g. with navigateTo, the pocketbase url is correct (e.g. www.pocketnuxt.com/api).

Example:
Calling '/' in a fresh browser window and clicking on a button with navigateTo('/about'), where '/about' calls the pocketbase api, works.
Directly calling '/about' in a fresh window fails, because the pocketbase api requests defaults back to http://localhost:8090.

Can you reproduce this? Do you know a good fix?

Regards

Use `usePocketbase` on server API route

Thanks for the project. Very useful.

I'm new to Nuxt 3, and assessing its server api capacity.

I'm trying to consume the usePocketbase composable in a server api route.

// /server/api/auth/login.post.ts
export default defineEventHandler(async (event) => {
  const pocketbase = usePocketbase();

  ...
});

I'm basically getting a 500 usePocketbase is not defined error. How can I make it so this can be used on the server api route?

Thanks!

Demo down

Demo does not work