Nuxt Image Gallery (Directus Fork)

This repository is a fork of Flosciante/nuxt-image-gallery, but uses Directus instead of nuxt-hub, since nuxt-hub requires a lot of extra settings.

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-gallery

Don'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 to admin if 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.