Nuxt photos gallery
Features
- Nuxt3 ready
- Gallery in grid
Quick Setup
- Add
nuxt-photos-gallery
dependency to your project
# Using pnpm
pnpm add -D nuxt-photos-gallery
# Using yarn
yarn add --dev nuxt-photos-gallery
# Using npm
npm install --save-dev nuxt-photos-gallery
- Add
nuxt-photo-gallery
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-photos-gallery'
]
})
- Manage your gallery
<Nuxt-gallery rows="5">
<Nuxt-gallery-image
image-src="path/to/image.png"
/>
<Nuxt-gallery-image
rounded="true"
image-src="path/to/image.jpg"
/>
</Nuxt-gallery>
You can edit numbers of rows using rows=5
in <Nuxt-gallery rows="5">
minimum is 3.
if you want your gallery to be rounded use rounded="true"
That's it! You can now use Nuxt-Photos-Gallery in your Nuxt app
Development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release