PocketBase Vue Template

A starter template for using Vue/Vuetify with Pocketbase as a backend.

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation and Setup
     Docker Dev Environments
     Local (Non-Docker)
     Docker
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

I started working with PocketBase and Vue/Vuetify on a couple of side projects and found that I was referencing one when creating a new project from scratch. After that, I decided that I wanted to try and create a starter template for anyone to be able to use.

Here's why:

• Your time should be focused on the core of your application, not having to create everything from scratch.
• Comes out of the box with a Vue Admin Setup page (but is still customizable through the pocketbase.go file)
• Comes with a default layout to get you up and started quickly

Of course, no one template will serve all projects since your needs may be different. I'll be adding more customizability in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.

(back to top)

Built With

• 
• 
• 
• 

(back to top)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node 20.11.0+
• Go 1.21.6+
• Docker (Recommended)

Installation and Setup

1. Clone the repo

   git clone https://github.com/MRSessions/pocketbase-vue-starter.git

Docker Dev Environments

Coming soon!

Local (Non-Docker)

Note: You can run the project separately with the default ports 8090 (PocketBase) and 3000 (Vue). The defult .env file is using VITE_POCKETBASE_URL to set the PocketBase URL. You can change this to point to a different PocketBase instance or if you change the port.

1. In the pocketbase directory, run the following command to start the PocketBase server

   go run . serve #Runs PocketBase on default port 8090

2. In the vue-client directory, install NPM packages

   npm install

3. In the vue-client directory, run the following command to start the Vue server

   npm run dev #Runs Vue on default port 3000

Docker

• The easiest way to run is use Docker Compose

  docker-compose up --build

  or to recreate the container

  docker-compose up --build --force-recreate

(back to top)

Usage

PocketBase

Defaults

I have setup PocketBase to remove(rewrite) the PocketBase default routes. By default, it is allowed. If you want to disable PocketBase routes, you can set the environment variable POCKETBASE_DISABLE_UI to true. This will keep users from accessing the PocketBase UI. Find details in below code sections.

pocketbase.go

func main() {
  app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
    if getenvBool("POCKETBASE_DISABLE_UI") {
      e.Router.Pre(middleware.Rewrite(map[string]string{
        "/_":  "/",
        "/_*": "/",
      }))
      log.Default().Println("PocketBase UI is disabled")
    }
    e.Router.GET("/*", apis.StaticDirectoryHandler(os.DirFS(publicDir), indexFallback))
    return nil
  })
}

func getenvBool(key string) bool {
  val := os.Getenv(key)
  ret, err := strconv.ParseBool(val)
  if err != nil {
    return false
  }
  return ret
}

docker-compose.yml

version: "3"

pocketbase-vue-starter:
  image: ghcr.io/mrsessions/pocketbase-vue-starter:latest
  container_name: pocketbase-vue-starter
  restart: unless-stopped
  environment:
    - POCKETBASE_DISABLE_UI=true # Set to true to disable the PocketBase UI
    - POCKETBASE_ADMIN_EMAIL=admin@example.com #This is the default if you don't set it or this value is removed
    - POCKETBASE_ADMIN_PASSWORD=1234567890 #This is the default if you don't set it or this value is removed
  volumes:
    - ./pocketbase-db:/app/pb_data
  ports:
    - 8090:80

volumes:
  pocketbase-db:

Dockerfile (Build Final Image Section)

# build final image
FROM golang:1.21.6-alpine3.19 AS final

WORKDIR /app

COPY --from=builder /app/pocketbase ./

COPY --from=node-builder /app/dist ./dist

# Set to true to disable the PocketBase UI if not using Docker Compose
ENV POCKETBASE_DISABLE_UI=false

EXPOSE 8090

CMD ["/app/pocketbase", "serve", "--http=0.0.0.0:80"]

Migrations

• PocketBase has a built-in migration system. You can create a migration file by running the following command:

  go run . migration create <migration-name>

• PocketBase will automatically migrate the database when the server starts. You can also run the migrations manually by running the following command:

  go run . migration up

• You can also rollback the migrations by running the following command:

  go run . migration down

• After creating migrations or updating the schema with PocketBase, if you want to generate typescript definitions, you can use the pocketbase-typegen commands:

  npx pocketbase-typegen --db .pocket-base/pb_data/data.db

Note: This will generate a typescript file in the rot directory called pocketbase-types.ts. This file will be used to generate the typescript definitions for the PocketBase schema to use in your code.

Vue

(back to top)

Roadmap

• Add section on migrations.
• Add default layout
• Create initialize PB page in Vue to create first PocketBase Admin
• Clean up README.md
  • Add Pocketbase Typegen (Generate typescript definitions from your pocketbase.io schema.) documentation
• Create a Docker Dev Environment
• Add a section for a quick how to use the PocketBase API in Vue (Refer to the PocketBase API Docs)

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature (git checkout -b feature/AmazingFeature) or Bug Fix (git checkout -b bug/AmazingBugFix)
3. Commit your Changes (git commit -m 'Add some AmazingFeature or some AmazingBugFix')
4. Push to the Branch (git push origin feature/AmazingFeature or git push origin bug/AmazingBugFix)
5. Open a Pull Request
   1. If your change includes quite a bit of change, please document the changes in detail in the pull request.

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Matt Sessions - @MRSessions - pbvuestarter@sessionstech.com

Project Link: https://github.com/MRSessions/pocketbase-vue-starter

(back to top)