tonn-aprille/nuxt-starter-template

Template for basic static site generated marketing website

nuxt-starter-template

NUXT Template for static site generated marketing website

Features & Ready set up Built in

• Responsive Images via NUXT Optimized Images
• Fancyapps UI (Licence needed)
• Manifest & Favicon Icon Generation
• Automatic Sitemap Generation
• Bootstrap
• Countup.js
• Fantasticon
• Mail Spam Protection
• PHP Contact Form
• PurgeCSS
• Responsive Slideout Menu
• Good Lighthouse Audit ( Performance 90+, Accessibility 100, Best Practices 100, SEO 100)
• Opt-In Cookie Banner
• Modal Windows with route change

Demo

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Configuration

General

• nuxt.config.js
• config/infos.json for contact information that will be used in different places site-wide
• menus.json to generate main menu, footer menu and social menu

Image-Sizes

• Check compontents/lib/ImageSet.vue to adjust image-sizes for your custom src-set

Webfonts

• Add preconnect URL for external Webfonts to nuxt.config.js in head.link
• Add Custom Families to nuxt.config.js in webfontloader (see: nuxt-webfontloader)
• Optional: Use local-webfont to download webfonts css and add display: swap to css file (see: css/_font.scss)

Favicon & Manifest

• Replace static/favicon.svg
• Change config/faviconDescription.json or generate new one for nuxt-rfg-icon
• favicon.ico will be generated through nuxt-rfg-icon

Sitemap

• Change settings in nuxt.config.js
• Use sitemap.routes to overwrite priorities or add more URLs

Contact Form

• Change Message Body, Field names and email address in static/mailer.php

Fontasticon

• Generates Icon Font from assets/icons/*.svg to static/fonts/icon-font.*.
• Uses config/fontasticon.js to map decimal unicode characters for the font.
• Generates CSS Classes for different icons to css/_icons.scss from template placed in helpers/icon-font-template.hbs
• Generates list of Icons to helpers/icons.json. Used in icons.vue page to show all icons. See package.json scripts key and config/fontasticon.js for options.

npm run icons

Cookie Message

• Every key in cookieGroups in config/cookieMessage.json will be a group of services in the message. See the example to create new groups.
• Use the store service to execute code when something is enabled.
• see privacy.vue for related privacy informations

ToDo

• Cookie Message as extra component: Work in progress. Help wanted!

Credits

Thanks to GigaHierz for helping prepare this repo and her feedback!

Thanks to HF Media for the stunning placeholder video.

Thanks to myself for the placeholder images.