A sample SPA/SSR application built with reactive framework Vue 3 powered by Nuxt ecosystem. Figma Golobe design was used as an example. This project may be useful for anyone who is interested in developing modern websites.
- Single-Page application with Server-Side Rendering
- Authentication via third-party OAuth providers
- Support different databases
- Localization to multiple languages
- OpenGraph images for SEO - prerendered or generated on-the-fly for dynamic entities
- Acsys CMS - out-of-the-box CMS integration
- HTML pages & images caching, configurable cache refresh policies on changes (e.g. via CMS)
- UI: adaptive layout, light/dark theme support, input/selected values validation & prompting
- Personal account with email confirmation registration flow, reviews, photos uploading, favourites & booking history
- PDF generation for ticket/booking documents
- Advanced error handling: error page / popup notification / HTML error stub on problematic component depending on source and severity of error as well as additional logging on server-side and on client-side (via REST endpoint)
Project uses a number of open source projects to work properly:
- Nuxt - highly customizable web application server which provides easy integration with third-party solutions & plugins. E.g. some of used modules are:
- i18n - for localization
- Nuxt Auth - for authentication & authorization
- Unlighthouse - for performing site quality scan using Google Lighthouse
- Nuxt SEO - the complete SEO solution for Nuxt
- Nuxt Swiper - integration with Swiper.js - mobile touch slider with hardware accelerated transitions and amazing native behavior
- Vue 3 - progressive, incrementally-adoptable JavaScript framework for building UI on the web
- Vite - Next generation frontend tooling. It's fast!
- node.js - evented I/O for the backend
- Prisma - ORM solution to support different databases
- Pinia - intuitive, type safe and flexible Store for Vue
- Nodemailer - for sending emails
- Playwright - for Web Testing and Automation
- Winston - for logging
- Nuxt OgImage - for generating OpenGraph images for entities on-the-fly using Satori
- Vue Yandex Maps - for marking hotel locations on interactive world map
- PDFKit - A JavaScript PDF generation library for Node and the browser
- Other third-party UI components:
- CropperJS - for uploading photos
- VCalendar - An elegant calendar and date picker plugin for Vuejs
- Vue Final Modal - for managing modal windows
- Floating Vue - for popups & drop downs
- Vue Toastification - for notifications
- Vuelidate - for user input validation
- TipTap - The headless rich text editor, was used for creating user reviews
- vue3-perfect-scrollbar - A minimalistic yet powerful Vue.js wrapper for Perfect Scrollbar
Project requires Node.js v20+ to be installed. (it should also run on Node v18 but was not tested in that configuration)
Install the dependencies and run server.
cd ./src
npm install
npm run quickstartThis will start the website with minimum external services configuration: emailing disabled, no CAPTCHA, only local OAuth provider e.t.c. SQLite database will be created locally.
Open browser and type http://localhost:3000. First-time page visit will take a couple of minutes to start the server because of initial database data seeding
You will need to download Acsys sources, enable CMS in project config and then proceed with quickstart build as described previously. The following script can be used:
git clone https://github.com/acsysio/acsys.git ./externals/acsys
cd ./externals/acsys
npm install
cd ./../../src
# Now edit .env file and uncomment #CMS=acsys first line
npm install
npm run quickstartAfter server is started CMS will be available at http://localhost:9000, admin login and password should be already pre-filled.
Almost any type of entities are available for editing, but some operations may be restricted or won't take any effect for a couple of auto-generated entities or fields whose modifications should trigger non-trivial app logic.
NOTE: by default SSR caches rendered html page markup in Nitro cache, so changes made in CMS won't be immediately reflected in browser even when reloading with browser-side caching disabled. 10 minute-interval refresh task is running in background on server. Not to wait for 10 minutes you should either disable caching in project config here or call POST /api/purge-cache API endpoint
MIT