Hamburger menu missing when using vuetify baseline wireframe or other wireframes

[sachinkmohan]

The hamburger menu is missing when I am using the baseline wireframes on the vuetify website.

Can someone please help.

I am using the latest version of vue and vuetify.

    "vue": "^3.2.47",
    "vuetify": "^3.2.2"

Wireframe used : https://vuetifyjs.com/en/wireframes/baseline/

Below is my package.json

{
  "name": "em-reloaded",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuetify": "^3.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "prettier": "^2.8.8",
    "vite": "^4.3.4"
  }
}

[nbro]

I was also facing this issue. Unfortunately, the documentation is a bit confusing and many examples are not reproducible.

Here's how I solved it.

First, I installed the fonts (or use the corresponding command for your package manager)

npm install @mdi/font -D

and then added the following import

import '@mdi/font/css/materialdesignicons.css'

to the main.ts or main.js before the call to createVuetify.

More info about the fonts here