nuxt vuetify google fonts undefined

Using Google Fonts with Nuxt.js and Vuetify in a Vue Project

  1. Install the Required Packages

  2. Run the following command to install the required packages: bash npm install @nuxtjs/vuetify

  3. Configure Vuetify

  4. In the nuxt.config.js file, add the following configuration: javascript buildModules: [ '@nuxtjs/vuetify', ], vuetify: { customVariables: ['~/assets/variables.scss'], treeShake: true, },

  5. Include Google Fonts in the Project

  6. Inside the <head> section of the nuxt.config.js file, add the following code to include Google Fonts: javascript head: { link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Material+Icons' }, ], },

  7. Usage in Vuetify Components

  8. You can now use the Google Fonts in Vuetify components by specifying the font family in the styles or components where you want to apply them.

  9. Verify and Test

  10. After making these changes, verify that the Google Fonts are successfully included and applied to the Vuetify components in your Vue project.