/appwritelovesquasar-techhub

Administration panel with login feature for Appwrite.io built on top of Quasar framework for Vue.js

Primary LanguageJavaScript

logo

Appwrite ❤ Quasar - Starter Pack for Admin panel

This project will serve as your starting pack for the Appwrite backend application and basic admin panel with login/logout feature.

Prerequisites

Appwrite

Install or configure your own instance of Appwrite.

Quasar

Install Quasar CLI.

Environment variables

Create a .env file in the root of the project. Content of the file is:

_APP_API_URL=url_to_the_appwrite
_APP_PROJECT_ID=project_id_from_appwrite

Install NPM packages

yarn

Start frontend

quasar dev

Administration

Navigate to /admin URL in your favorite browser. Use the form to log in to the admin panel. Login feature works on admin only. It is disabled in this router file on the frontend.

Routes

You can add/update all routes in the routes.js file.

Favicon

Change main logo /public/logo/logo_500_500.png to fit your brand.

Install icongenie package:

yarn global add @quasar/icongenie

Now run the command to generate all favicons (from the root of the project):

icongenie generate -i public/logo/logo_500_500.png --skip-trim -m spa

Fonts

You can use your own font. Upload it to the fonts/ directory and change the corresponding style.

Login & Registration

You can use the user and registration components we created. They only contain basic styling. So you can fit it into your website design.

Appwrite instance

In .vue files:

this.$appwrite.DO_SOMEETHING()

In .js files:

import { appwrite } from './boot/appwrite'

appwrite.DO_SOMEETHING()

Upload a file

We have prepared a simple upload component you can easily adjust.

<file-upload />

By default, the file is uploaded with "*" permission (free for all). You can configure read and write permissions with component properties like:

<file-upload
  :permission-read="['*']"
  :permission-write="['*']"
/>