<h2>Overview</h2>
<p>The project showcases a clean and efficient way to set up a personal website using VitePress, which combines the power of Vite and Vue3. The custom template leverages TailwindCSS, enabling an aesthetically pleasing and responsive design. This setup not only provides a modern web experience but also allows for easy customization, making it ideal for anyone looking to establish an online presence.</p>
<p>For anyone interested in personal web development, this template provides a straightforward starting point. With support for cloud deployment via S3 and Cloudfront, you can easily publish your site while taking advantage of scalable cloud services. The instructions offered are clear, making it accessible for both beginners and seasoned developers.</p>
<h2>Features</h2>
<ul>
<li><strong>Easy Setup:</strong> Quick installations using Yarn make getting started a breeze for any user who wants to create a personal website.</li>
<li><strong>Modern Tech Stack:</strong> Built with Vite and Vue3, providing a robust and increasingly popular framework for fast and dynamic web applications.</li>
<li><strong>Custom Template:</strong> TailwindCSS integration allows for easy styling, ensuring your website looks professional and appealing without extensive coding.</li>
<li><strong>Cloud Deployment Ready:</strong> Supports deployment to S3 and Cloudfront, so you can take advantage of scalable storage and fast content delivery globally.</li>
<li><strong>GitHub Integration:</strong> Enables automatic deployment on master branch pushes, streamlining your workflow and ensuring your site is always up to date.</li>
<li><strong>Manual Deployment Capabilities:</strong> Offers scripts for those who prefer a hands-on approach or wish to deploy outside of GitHub repositories.</li>
</ul>


<h2>Overview</h2>
<p>Harlanzw.com is a personal website built with Nuxt 3. It utilizes nuxt-seo-kit and Docus to optimize Nuxt code practices, SEO, performance, and accessibility. The website serves as a reference for optimal Nuxt code practices, with a focus on automated Schema.org, markdown read time calculation, code file name and language support, automatic server-side icon resolving, sitemap.xml and feed generation, automatic breadcrumbs, and integration with @nuxt/image for cloudinary-served images. It also includes additional features such as automatic routes based on content with 404 handling, automatic navigation generation, easy content composition, fully typed content, split pages/posts for easier content organization, line-md icons by cyberalien, pnpm, WindiCSS, Eslint with @antfu/eslint-config, SEO and i18n best practices, Fathom analytics, and Vercel hosting.</p>
<h2>Features</h2>
<ul>
<li><strong>Automated Schema.org</strong>: The website includes automated Schema.org functionality to optimize SEO.</li>
<li><strong>Markdown read time calculation</strong>: The website calculates the read time for Markdown content.</li>
<li><strong>Code file name and language support</strong>: Supports displaying the file name and language for code files.</li>
<li><strong>Automatic Server Side Icon Resolving</strong>: The website utilizes iconify and unplugin-icons to automatically resolve server-side icons, eliminating FOUC (Flash of Unstyled Content).</li>
<li><strong>Sitemap.xml and feed generation</strong>: The website generates a sitemap.xml and feed for improved SEO and content discovery.</li>
<li><strong>Automatic breadcrumbs</strong>: The website includes automatic breadcrumbs integration with Schema.org.</li>
<li><strong>Integrated with @nuxt/image</strong>: The website integrates with @nuxt/image to serve images using cloudinary.</li>
</ul>
<h2>Summary</h2>
<p>Harlanzw.com is a personal website built with Nuxt 3, featuring various optimizations for SEO, performance, and accessibility. It serves as a reference for optimal Nuxt code practices and includes features such as automated Schema.org, markdown read time calculation, code file name and language support, automatic server-side icon resolving, sitemap.xml and feed generation, automatic breadcrumbs, integrated @nuxt/image for cloudinary-served images, and much more. The installation process is simple and requires installing the necessary dependencies and starting the development server.</p>


<h2>Overview:</h2>
<p>The Nuxt Delay Hydration module is a technique used to trick Google Lighthouse into thinking a website is faster than it actually is. It is designed for progressively enhanced websites and may not provide any significant performance or SEO benefit. By delaying hydration, it is possible to improve the Google Lighthouse score by reducing the "Blocking Time" metric. It is important to note that this is a hacky solution and should be used with caution.</p>
<h2>Features:</h2>
<ul>
<li>Reduce your site's "Blocking Time"</li>
<li>Per-page level configuration using route rules</li>
<li>Optional replay of pre-hydration clicks</li>
</ul>
<h2>Summary:</h2>
<p>The Nuxt Delay Hydration module is a tool used to improve the Google Lighthouse score of a website by reducing the "Blocking Time" metric. It tricks Google into thinking the site is faster than it actually is by delaying hydration. This module should only be used for progressively enhanced websites and may not provide any real performance or SEO benefit. It is important to use this module with caution and consider alternative solutions in the long term.</p>


<h2>Overview</h2>
<p>The article provides an overview of a product called "nuxt-link-checker," which is an SEO-focused tool for inspecting and fixing links in Nuxt applications. The author mentions several key features of the product and also provides instructions for installing the theme.</p>
<h2>Features</h2>
<ul>
<li><strong>7 SEO focused link inspections</strong> (more coming soon)</li>
<li>See live inspections right in your Nuxt App</li>
<li>Magically fix them in Nuxt Dev Tools</li>
<li>Generate reports on build (html, markdown)</li>
</ul>
<h2>Summary</h2>
<p>This article introduces the nuxt-link-checker product, which is an SEO-focused tool for inspecting and fixing links in Nuxt applications. It highlights key features such as SEO inspections, live inspections in the Nuxt app, fixing links in Nuxt Dev Tools, and generating reports. The article also provides instructions for installing the theme.</p>


<h2>Overview:</h2>
<p>The Nuxt Schema.org is a theme that provides a simple API based on Google and Yoast best practices for implementing Schema.org structured data on websites. It offers several key features that make it user-friendly and efficient in optimizing web pages for search engines. The theme includes automated relations, date and URL resolving, global meta settings, and minimal code for easy integration.</p>
<h2>Features:</h2>
<ul>
<li><strong>Simple API based on Google and Yoast best practices</strong>: The theme follows the recommended practices of Google and Yoast for implementing Schema.org structured data, ensuring compatibility and effectiveness.</li>
<li><strong>30+ Nodes with automated relations, date, URL resolving and more</strong>: The theme includes more than 30 nodes that provide automated relations, date management, URL resolution, and other functionalities to enhance the Schema.org implementation.</li>
<li><strong>Simple global meta provides for minimal boilerplate</strong>: The theme offers a simple global meta setting, minimizing the need for boilerplate code and making the implementation process more straightforward.</li>
<li><strong>Minimal code, optimized for tree-shaking and SSR</strong>: The theme is designed with minimal code, optimized for tree-shaking (elimination of unused code) and server-side rendering (SSR), resulting in improved performance and efficiency.</li>
<li><strong>Nuxt Dev Tools integration</strong>: The theme seamlessly integrates with the Nuxt Dev Tools, providing additional functionality and ease of use during development.</li>
</ul>
<h2>Summary:</h2>
<p>The Nuxt Schema.org theme is a powerful tool for implementing Schema.org structured data on websites. Its key features, including adherence to best practices, automated functionalities, minimal code, and convenient integration with Nuxt Dev Tools, make it a valuable asset for optimizing web pages and improving SEO performance. By using this theme, users can ensure their websites are properly structured for better visibility and ranking on search engines.</p>


<h2>Overview:</h2>
<p>The Nuxt SEO Experiments is a plugin for Nuxt.js that allows developers to easily manage SEO metadata for their applications. It provides a convenient way to define SEO meta information in the nuxt.config file and automatically adds meta tags to the HTML based on page titles and descriptions. Additionally, it corrects tags that need to be absolute, such as og:image. This plugin simplifies the process of managing SEO meta data, making it easier for developers to optimize their applications for search engines.</p>
<h2>Features:</h2>
<ul>
<li><strong>Next.js inspired Metadata Files:</strong> The plugin allows developers to define SEO meta information using metadata files, similar to how it is done in Next.js applications.</li>
<li><strong>Use SEO meta in your nuxt.config:</strong> Developers can define SEO meta information directly in the nuxt.config file using the app.seoMeta property.</li>
<li><strong>Route rules:</strong> The plugin provides the ability to define route rules for SEO meta information, allowing for more granular control over the meta tags for different pages.</li>
<li><strong>Adds meta tags based on page title and description:</strong> The plugin automatically generates and adds meta tags, such as og:title and og:description, based on the page's title and description.</li>
<li><strong>Corrects absolute tags:</strong> The plugin handles the correction of tags that need to be absolute, such as og:image. This ensures that the meta tags are rendered correctly in the HTML.</li>
<li><strong>Site config template params:</strong> Developers can use template parameters in the site config to dynamically generate meta tags. For example, using useHead({ title: '%site.title' }) allows the page title to be generated dynamically based on the site title.</li>
</ul>
<h2>Summary:</h2>
<p>The Nuxt SEO Experiments plugin is a helpful tool for developers who want to easily manage SEO meta information in their Nuxt.js applications. It provides a simplified way to define SEO meta information using metadata files or directly in the nuxt.config file. The plugin automatically adds meta tags based on page titles and descriptions, and also handles the correction of absolute tags. With the ability to define route rules and use template parameters, developers have more flexibility and control over the SEO meta information for their application. Overall, the Nuxt SEO Experiments plugin simplifies the process of optimizing applications for search engines and improves SEO capabilities.</p>


<h2>Overview:</h2>
<p>Nuxt SEO Kit v2 (renamed to Nuxt SEO) is a beta version of an all-in-one SEO module for Nuxt 3. It simplifies the process of configuring SEO for Nuxt by combining multiple SEO modules and best practices into one. With Nuxt SEO Kit, you can easily improve your app's SEO without the need for extensive module installation and separate configuration.</p>
<h2>Features:</h2>
<ul>
<li><strong>Search engine visibility solved</strong>: Ensure that search engines crawl the right content with robot rules, sitemap.xml support, and meta tags.</li>
<li><strong>Enhanced Social Sharing</strong>: Generate dynamic or static social share images and automatically include opengraph and twitter meta tags.</li>
<li><strong>Find issues before they become a problem</strong>: Automatically handle trailing slashes correctly, discover broken links, and more.</li>
<li><strong>Runtime Config Template Tokens</strong>: Use route rules to manage custom config and easily override config for different environments.</li>
<li><strong>Breadcrumbs</strong>: Generate Schema.org compliant breadcrumbs with zero-config.</li>
</ul>
<h2>Summary:</h2>
<p>Nuxt SEO Kit v2 (renamed to Nuxt SEO) is a beta version of an all-in-one SEO module for Nuxt 3 that simplifies the process of configuring SEO for Nuxt. It combines multiple SEO modules and best practices into one, making it easy to improve your app's SEO. With features like search engine visibility, enhanced social sharing, issue detection, and runtime config template tokens, Nuxt SEO Kit offers a comprehensive solution for optimizing your Nuxt app's SEO.</p>


<h2>Overview</h2>
<p>Nuxt SEO Utils is a powerful tool designed to enhance the discoverability and shareability of your Nuxt.js website. With its collection of defaults and utilities, it tackles essential aspects of search engine optimization (SEO) effectively. The highlight of this package is its ability to automate crucial tasks such as creating canonical URLs and managing Open Graph tags, making it an invaluable resource for developers looking to improve their site's online presence.</p>
<p>In a world where online visibility is crucial, Nuxt SEO Utils provides an array of features tailored to ensure your Nuxt site remains competitive and optimized for search engines. With an emphasis on best practices and user-friendly configurations, it simplifies the process of SEO implementation while enhancing the overall user experience.</p>
<h2>Features</h2>
<ul>
<li><strong>Next.js Inspired Metadata Files</strong>: Leverage a familiar syntax to work with metadata as you would in a Next.js application, making onboarding easier.</li>
<li><strong>SEO Meta in nuxt.config</strong>: Use <code>app.seoMeta</code> in your configuration to define meta tags efficiently across your Nuxt application.</li>
<li><strong>Dynamic Meta Tag Generation</strong>: Automatically adds essential meta tags such as <code>og:title</code> and <code>og:description</code> based on your page titles and descriptions.</li>
<li><strong>Absolute Tag Correction</strong>: Ensures that any required tags, like <code>og:image</code>, use absolute URLs for better compatibility and performance.</li>
<li><strong>Site Configuration Template</strong>: Easily implement site-wide parameters using <code>useHead({ title: '%site.title' })</code> to maintain consistency in your title tags.</li>
<li><strong>Breadcrumb Composable</strong>: Enhance navigation and provide better contextual information to users and search engines with easy breadcrumb integration.</li>
<li><strong>Best Practice Defaults</strong>: Benefit from default settings that align with SEO best practices, helping to improve your site's optimization with minimal effort.</li>
</ul>


<h2>Overview:</h2>
<p>Technical SEO can be a complex and challenging task, requiring the configuration of various components to work together effectively. However, Nuxt SEO aims to simplify this process by providing a comprehensive SEO solution specifically designed for Nuxt. By combining seven SEO modules and best practices into one easy-to-configure module, Nuxt SEO minimizes the effort required to achieve optimal SEO performance. Whether you have a fully dynamic site or a static one, Nuxt SEO offers powerful APIs and default configurations to enhance your SEO efforts.</p>
<h2>Features:</h2>
<ul>
<li><strong>@nuxtjs/sitemap</strong> - Support for generating Sitemap.xml.</li>
<li><strong>nuxt-simple-robots</strong> - Manage site crawling by configuring robots.txt.</li>
<li><strong>nuxt-schema-org</strong> - Generate Schema.org JSON-LD for improved SEO.</li>
<li><strong>nuxt-seo-experiments</strong> - Experiment with additional SEO meta features.</li>
<li><strong>nuxt-og-image</strong> - Generate dynamic social share images for improved engagement.</li>
<li><strong>nuxt-link-checker</strong> - Check for broken links on your site.</li>
</ul>
<h2>Summary:</h2>
<p>Nuxt SEO is a comprehensive SEO solution specifically designed for Nuxt. By combining multiple SEO modules and best practices into one module, it simplifies the process of configuring and optimizing SEO for your Nuxt site. With powerful APIs and default configurations, Nuxt SEO offers an easy-to-use solution for achieving excellent SEO performance.</p>


<h2>Overview</h2>
<p>The Nuxt Simple Robots is a helpful tool for managing and controlling the indexing and crawling behavior of search engine bots on your website. It offers various features to easily merge existing robots.txt files or create a new one programmatically. Additionally, it provides automatic generation of X-Robots-Tag headers and &#x3C;meta name="robots" ...> meta tags. The plugin seamlessly integrates with route rules and runtime hooks, allowing for granular control over search engine indexing. The plugin also disables non-production environments from being indexed, solving common issues and following best practice default configuration.</p>
<h2>Features</h2>
<ul>
<li><strong>Merge in existing robots.txt or programmatically create a new one:</strong> The plugin allows you to easily incorporate your existing robots.txt file into your Nuxt project or create a new one dynamically.</li>
<li><strong>Automatic X-Robots-Tag header and &#x3C;meta name="robots" ...> meta tag:</strong> Nuxt Simple Robots takes care of generating the necessary X-Robots-Tag headers and &#x3C;meta name="robots" ...> meta tags for your web pages, eliminating the need for manual implementation.</li>
<li><strong>Integrates with route rules and runtime hooks:</strong> With this plugin, you can define custom rules and hooks to control search engine indexing behavior based on specific routes or runtime conditions.</li>
<li><strong>Disables non-production environments from being indexed:</strong> Nuxt Simple Robots ensures that non-production environments, such as staging or development, are not indexed by search engines, preventing accidental exposure of unfinished or test versions of your website.</li>
</ul>
<h2>Summary</h2>
<p>The Nuxt Simple Robots plugin is a valuable tool for managing search engine indexing behavior in Nuxt projects. With its ability to merge existing robots.txt files or generate a new one programmatically, automatic generation of X-Robots-Tag headers and &#x3C;meta name="robots" ...> meta tags, integration with route rules and runtime hooks, and automatic disabling of non-production environments from being indexed, the plugin offers an intuitive solution to control how search engine bots interact with your website. Its easy installation process and comprehensive documentation make it a convenient choice for Nuxt developers.</p>


<h2>Overview:</h2>
<p>Nuxt Site Config aims to provide a centralized configuration solution for modules in Nuxt applications. Traditional configurations like URLs, environments, and names can be shared and extended using this new configurable solution. The project aims to simplify the way modules interact and eliminate the need for duplicating configurations across multiple modules.</p>
<h2>Features:</h2>
<ul>
<li><strong>Zero-config:</strong> Default site config settings are provided for easy setup.</li>
<li><strong>Flexible Source Support:</strong> Can pull site config from various sources like Nuxt Config, Runtime Config, Environment Variables, App Config, Route Rules, or Programmatically.</li>
<li><strong>Powerful APIs:</strong> Includes APIs like useSiteConfig, createSitePathResolver, withSiteUrl, useNitroOrigin for module authors.</li>
<li><strong>Ledger Capabilities:</strong> Provides features for tracking and managing configurations effectively.</li>
<li><strong>Integration with @nuxtjs/i18n:</strong> Allows seamless integration with internationalization modules.</li>
</ul>
<h2>Summary:</h2>
<p>Nuxt Site Config aims to revolutionize the way modules handle common configurations by providing a centralized, extensible solution. With features like zero-config setup, flexible source support, powerful APIs, ledger capabilities, and integration with internationalization modules, Nuxt Site Config simplifies configuration management for Nuxt applications. Consider integrating Nuxt Site Config into your projects to streamline module interactions and enhace end-user experiences.</p>


<h2>Overview</h2>
<p>The nuxt-webpack-optimisations module is a collection of webpack config changes that can help speed up build times and improve performance in Nuxt projects. By making optimizations and assumptions about the development environment, this module can reduce build times by up to 50% when cold and over 95% when hot. It is important to note that some of the optimizations are riskier and should only be used in development environments.</p>
<h2>Features</h2>
<ul>
<li><strong>speed-measure-webpack-plugin</strong>: This tool measures the performance of the webpack build process.</li>
<li><strong>Nuxt config build.cache enabled</strong>: Enables caching in the Nuxt build process.</li>
<li><strong>Nuxt config build.parallel enabled</strong>: Enables parallel building in the Nuxt configuration.</li>
<li><strong>webpack's best practices for performance</strong>: Implements performance best practices recommended by webpack.</li>
<li><strong>esbuild replaces babel-loader</strong>: Uses the esbuild loader instead of babel-loader for improved performance.</li>
<li><strong>esbuild replaces ts-loader</strong>: Uses the esbuild loader instead of ts-loader for improved performance.</li>
<li><strong>postcss-preset-env is disabled</strong>: Disables postcss-preset-env for improved performance.</li>
<li><strong>file-loader replaces url-loader</strong>: Uses file-loader instead of url-loader for improved performance.</li>
<li><strong>Nuxt config build.hardsource enabled</strong>: Enables hardsource caching in the Nuxt configuration for improved performance.</li>
</ul>
<h2>Summary</h2>
<p>The nuxt-webpack-optimisations module is a powerful tool for improving build times and performance in Nuxt projects. By making various optimizations and assumptions, this module can significantly reduce build times and improve the overall performance of your Nuxt applications. It is important to be cautious when using some of the riskier optimizations and to clear the cache if any issues arise. Overall, this module is a valuable addition to any Nuxt project seeking to maximize performance.</p>


<h2>Overview</h2>
<p>The Nuxt SEO module is designed to simplify the process of configuring technical SEO for Nuxt websites. It combines multiple SEO modules and best practices into one module, streamlining the setup process. Whether you have a fully dynamic site or a static one, Nuxt SEO provides powerful APIs and default configurations to improve your website's SEO performance.</p>
<h2>Features</h2>
<ul>
<li><strong>Sitemap.xml Support</strong>: The <code>@nuxtjs/sitemap</code> module enables the generation of a sitemap.xml file for your website, making it easier for search engines to crawl and index your pages.</li>
<li><strong>Manage site crawling</strong>: With the <code>nuxt-simple-robots</code> module, you can effectively manage how search engine bots crawl your website, controlling access to specific pages or directories.</li>
<li><strong>Generate Schema.org JSON-LD</strong>: The <code>nuxt-schema-org</code> module allows you to generate Schema.org JSON-LD code for SEO purposes. This structured data helps search engines understand and display rich snippets in search results.</li>
<li><strong>Experimental SEO meta features</strong>: The <code>nuxt-seo-experiments</code> module provides experimental SEO meta features, allowing you to test and optimize different meta tags and strategies to improve your website's search visibility.</li>
<li><strong>Generate dynamic social share images</strong>: The <code>nuxt-og-image</code> module enables the generation of dynamic social share images, automatically creating visually appealing images for social media platforms when your website is shared.</li>
<li><strong>Check for broken links</strong>: With the <code>nuxt-link-checker</code> module, you can automatically check your website for broken links, ensuring a smooth user experience and preventing negative SEO impact.</li>
</ul>
<h2>Summary</h2>
<p>The Nuxt SEO module is a comprehensive solution for managing technical SEO for Nuxt websites. By combining multiple SEO modules and best practices, it simplifies the configuration process and provides powerful APIs for dynamic sites and default configurations for static sites. With features like sitemap generation, site crawling management, Schema.org generation, experimental SEO meta features, dynamic social share images, and broken link checking, Nuxt SEO helps improve your website's SEO performance and user experience.</p>


Harlan Zw

Harlanzw.com Vitepress

Harlanzw.com

Nuxt Delay Hydration

Nuxt Link Checker

Nuxt Schema Org

Nuxt Seo Utils

Nuxt Seo

Nuxt Seo Utils

Nuxt Seo

Nuxt Simple Robots

Nuxt Site Config

Nuxt Webpack Optimisations

Nuxt Seo