In this episode we'll get off the ground quickly and with a little repetition if you've watched the foundation stuff.

What We're Going to Build

Ideally we're going to build the app that you're watching this video on! I'll have this course available in a number of locations - but the goal is that you're building what you see.

• A quick tour of existing applications, including my reference site
• References and docs that you'll find useful as we go along

Shut Up Already, Let's Code

Right, off we go! Pick a working directory and

npx nuxi@latest init red4
cd red4
npm i
code .

I'm using VS Code and code . is the shortcut for opening the current directory in it. If you're using something else, just open the directory as usual.

To look around, run npm run dev.

Install Vuetify

We need to install the package and then wire it to Nuxt:

npm install vuetify

Once finished, we need to add the package as a plugin to Nuxt. Inside the root of your project:

mkdir plugins
touch plugins/vuetify.js

Add this code to the plugins/vuetify.js file:

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

const vuetify = createVuetify({
  ssr: true,
})

Finally, in the root is a file called nuxt.config.ts and we need to tell it to include the Vuetify plugin:

export default defineNuxtConfig({
  telemetry: false, //add this so we don't forget
  css: [
    "vuetify/lib/styles/main.sass"
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

A Test Layout

To make sure everything looks good, pop open app.vue and add this:

<template>
  <v-card>
    <v-layout>
      <v-app-bar title="Application bar"></v-app-bar>

      <v-navigation-drawer>
        <v-list>
          <v-list-item title="Navigation drawer"></v-list-item>
        </v-list>
      </v-navigation-drawer>

      <v-main style="min-height: 300px;"></v-main>
    </v-layout>
  </v-card>
</template>