nuxt vuetify google fonts

1. Install Vue CLI: Start by installing Vue CLI globally on your machine. You can do this by running the following command in your terminal:

npm install -g @vue/cli

1. Create a new Nuxt project: Once Vue CLI is installed, create a new Nuxt project by running the following command:

vue create my-nuxt-project

This will prompt you to select a preset. Choose the default preset or customize it according to your needs.

1. Install Vuetify: Navigate to your project directory and install Vuetify using npm or yarn:

cd my-nuxt-project
npm install vuetify

1. Configure Vuetify in Nuxt: Open the nuxt.config.js file in the root of your project and add the following lines of code:

modules: [
  '@nuxtjs/vuetify',
],
vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  defaultAssets: {
    font: {
      family: 'Roboto',
    },
  },
},

This configures Vuetify to use a custom SCSS file for variables and the Roboto font family as the default font.

1. Import Google Fonts: Create a new SCSS file named variables.scss in the assets directory of your project. Add the following line of code to import the desired Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

Replace the URL with the Google Fonts URL for the specific font and weights you want to use.

1. Use Vuetify components: Now you can start using Vuetify components in your Nuxt project. Import the desired components in your Vue files and use them as needed.

That's it! You have successfully set up Nuxt with Vuetify and imported Google Fonts for your project. You can now customize your project further by exploring the documentation for Nuxt, Vuetify, and Google Fonts.