Nuxt Starter Template screenshot

Nuxt Starter Template

Author Avatar Theme by Mmoollllee
Updated: 2 Aug 2021
23 Stars

Template for basic static site generated marketing website

Categories

Overview

The Nuxt Starter Template is a ready-made template for creating a static site generated marketing website. It offers various features and built-in tools to optimize the website’s performance and functionality.

Features

  • Responsive Images via NUXT Optimized Images: Automatically optimize and generate responsive images for the website.
  • Fancyapps UI (Licence needed): Access and use fancy UI components for the website with a required license.
  • Manifest & Favicon Icon Generation: Easily generate and customize the website’s favicon and manifest files.
  • Automatic Sitemap Generation: Automatically generate a sitemap for the website to improve SEO.
  • Bootstrap: Include Bootstrap library for easily designing and styling the website.
  • Countup.js: Use Countup.js library to create animated numerical counters on the website.
  • Fantasticon: Generate an Icon Font from SVG icons and create CSS classes for different icons.
  • Mail Spam Protection: Implement measures to protect the website’s contact forms from spam.
  • PHP Contact Form: Add a PHP contact form to the website for users to send messages.

Installation

To install the Nuxt Starter Template, follow these steps:

  1. Clone the repository: git clone [repository-url]
  2. Navigate to the project folder: cd nuxt-starter-template
  3. Install the dependencies: npm install
  4. Configure the necessary files:
    • Adjust image sizes: Open components/lib/ImageSet.vue and modify the image sizes for your custom src-set.
    • Add preconnect URL and custom font families: Open nuxt.config.js and make the necessary changes in the head.link and webfontloader sections.
    • Replace the favicon and manifest files: Replace the static/favicon.svg file with your own favicon, and modify config/faviconDescription.json or generate a new one using nuxt-rfg-icon for the favicon generation.
    • Customize the sitemap: Modify the settings in nuxt.config.js and use sitemap.routes to overwrite priorities or add more URLs to the sitemap.
    • Adjust the contact form: Customize the message body, field names, and email address in static/mailer.php.
    • Generate the Icon Font: Use the config/fontasticon.js file to map decimal unicode characters and generate the Icon Font using the assets/icons/*.svg files.

Summary

The Nuxt Starter Template is a time-saving solution for creating a static site generated marketing website. It provides various features and ready-made configurations to optimize the website’s performance and functionality. With features like responsive images, UI components, favicon and manifest generation, automatic sitemap generation, and more, developers can quickly set up a professional website using this template. The installation process is straightforward, requiring some configuration changes in key files. Overall, the Nuxt Starter Template is a valuable resource for developers looking to create marketing websites efficiently.