Overview
This project is designed to create an image gallery using Nuxt.js integrated with Directus for a more streamlined setup.
Key Features
- Utilizes Directus for content management.
- Forked from nuxt-hub based Flosciante/nuxt-image-gallery.
- Simplified configuration compared to the original nuxt-hub integration.
Features
- 📷 Image upload and display with
Directus files API - 🖼️ Image Filters: Apply a variety of filters to your images.
- 💾 Saving: Save your images with applied filters.
- 🎠 Custom Carousel: Includes a custom carousel component that can be adapted for in-house use.
- 🏃🏻 View transition API The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states while also updating the DOM contents in a single step.
- 🔑 Nuxt Auth Utils Minimalist Authentication module for Nuxt exposing Vue composables and server utils.
Stack
- Directus - The flexible backend for all of your projects
- NuxtUI - A UI Library for Modern Web Apps
- Nuxt Fonts - Plug-and-play custom web font optimization and configuration for Nuxt apps.
- VueUse - Collection of useful composition APIs
- TypeScript
Getting Started
To get started with this repository, clone it and follow the setup instructions to configure Directus with Nuxt.js.
git clone https://github.com/hoachnt/nuxt-gallery.git
cd nuxt-galleryDon’t forget to change the .env.example file to .env and add your variable values.
Environment Variables
NUXT_ADMIN_PASSWORD- A password to access the admin panel and upload images, will default toadminif not provided.NUXT_SESSION_PASSWORD- A secret key for session encryption used by nuxt-auth-utils, will be generated automatically if not provided in development mode.