Loading...

Nuxt gallery + Directus

Nuxt gallery

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.