Google Fonts module for NuxtJS

Google Fonts module for NuxtJS

@nuxtjs/google-fonts Google Fonts module for NuxtJS

@nuxtjs/google-fonts

Google Fonts module for NuxtJS

Features

Setup

  1. Add @nuxtjs/google-fonts dependency to your project
yarn add --dev @nuxtjs/google-fonts # or npm install --save-dev @nuxtjs/google-fonts
  1. Add @nuxtjs/google-fonts to the buildModules section of nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/google-fonts',

    // With options
    ['@nuxtjs/google-fonts', { /* module options */ }]
  ]
}

⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
  googleFonts: {
    /* module options */
  }
}

Options

families

  • Type: Object
  • Default: {}
{
  families: {
    Roboto: true,
    'Josefin+Sans': true,
    Lato: [100, 300],
    Raleway: {
      wght: [100, 400],
      ital: [100]
    },
  }
}

See https://developers.google.com/fonts/docs/css2#quickstart_guides

display

  • Type: String
  • Default: null

The font-display property lets you control what happens while the font is still loading or otherwise unavailable.

{
  display: 'swap' // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
}

See https://developers.google.com/fonts/docs/css2#use_font-display

subsets

  • Type: Array[String]|String
  • Default: []

Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

See https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets

prefetch

  • Type: Boolean
  • Default: true

This option inject <link rel =" dns-prefetch "href =" https://fonts.gstatic.com/ "/> into your project header.

See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

preconnect

  • Type: Boolean
  • Default: true

This option inject <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> into your project header.

See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices

preload

  • Type: Boolean
  • Default: true

This option inject <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, optionally increase loading priority.

See https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content

useStylesheet

  • Type: Boolean
  • Default: false

This option inject <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, recommended for projects that use the AMP module that removes scripts.

download

  • Type: Boolean
  • Default: false

This option you can download css and google sources for your local project. This means that your project will not depend on these external resources.

Note: The options below are only used when this option is enabled.

base64

  • Type: Boolean
  • Default: false

This option encode the fonts and inject directly into the generated css file.

inject

  • Type: Boolean
  • Default: true

This option inject the globally generated css file.

See https://nuxtjs.org/api/configuration-css/

overwriting

  • Type: Boolean
  • Default: false

This option prevents files from being downloaded more than once.

outputDir

  • Type: String
  • Default: this.options.dir.assets

Specifies the output directory for downloaded files.

stylePath

  • Type: String
  • Default: 'css/fonts.css'

Specifies the path of the css file to be generated.

fontsDir

  • Type: String
  • Default: 'fonts'

Specifies the directory where the fonts will be downloaded.

Note: This option is used if the base64 option is disabled.

fontsPath

  • Type: String
  • Default: '~assets/fonts'

Specifies the path of the fonts within the generated css file.

Note: This option is used if the base64 option is disabled.

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

Download Details:

Author: nuxt-community

Source Code: https://github.com/nuxt-community/google-fonts-module

nuxtjs vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7