Adding MaterializeCSS to Nuxt project

This is an easy way to configure MaterializeCSS and Nuxt for your project. I am writing this for myself because I don't like going through the configuration process by always googling how to add stuff to a project.

Steps:

Go to your development folder and install a new Nuxt project
```
npm init nuxt-app <project-name>
```
Navigate to the app and run the app
```
npm run dev
```
Go to https://materializecss.com/getting-started.html
Download the MaterializeCss file
Install MaterializeCSS via npm using npm install materialize-css@next
Create a folder named plugins in your roots directory
Create a file inside plugins called materialize.js

Write the following code:

import M from 'materialize-css'
export default ({ app }, inject) => {
inject('M', M)
}

Add MaterializeCssto Nuxt.config.js inside plugins:

{ src: '~/plugins/materialize.js', mode: 'client' },

Create an assets folder in the root directory and paste materializecss CSSfolder in the assess folder.
Import the materilizecss file locally by going to Nuxt.config.js and adding the following to the css section:

'~/assets/css/materialize.css',
'~/assets/css/style.css',

In the components folder, create a new file called NavBar.vue
Write your NavBar layout inside this NavBar.vue, export the name and mount materializecss by calling the auto init method like this:

export default {
    name: 'NavBar',

    mounted() {
        this.$M.AutoInit();
      }
}

Create a layouts folder in the project’s root directory
Inside the layouts folder, create a defaults.vue
Paste the following code inside:

<template>
    <div class="row">
        <link
                href="https://fonts.googleapis.com/icon?family=Material+Icons"
                rel="stylesheet"
                />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <!-- <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet"> -->

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
        <meta name="viewport" content="viewport-fit=contain, width=device-width, initial-scale=1">


        <NavBar/>
        <nuxt/>


    </div>
  </template>

  <script>
  import NavBar from '../components/NavBar.vue';
  export default {
      components: {
          NavBar,
      },
  }
  </script>

  <style>

  </style>

You are good to go!

Chizom - DevSideOfLife

Chizom - DevSideOfLife

Adding MaterializeCSS to Nuxt project