Getting Started

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:

<span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;@mdi/font/css/materialdesignicons.css&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">&#x27;vuetify/styles&#x27;</span>

<span class="hljs-keyword">const</span> vuetify = <span class="hljs-title function_">createVuetify</span>({
  <span class="hljs-attr">ssr</span>: <span class="hljs-literal">true</span>,
})

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

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">defineNuxtConfig</span>({
  <span class="hljs-attr">telemetry</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">//add this so we don&#x27;t forget</span>
  <span class="hljs-attr">css</span>: [
    <span class="hljs-string">&quot;vuetify/lib/styles/main.sass&quot;</span>
  ],
  <span class="hljs-attr">build</span>: {
    <span class="hljs-attr">transpile</span>: [<span class="hljs-string">&#x27;vuetify&#x27;</span>],
  },
  <span class="hljs-attr">vite</span>: {
    <span class="hljs-attr">define</span>: {
      <span class="hljs-string">&#x27;process.env.DEBUG&#x27;</span>: <span class="hljs-literal">false</span>,
    },
  },
})

A Test Layout

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

<span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">v-card</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">v-layout</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">v-app-bar</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Application bar&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-app-bar</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">v-navigation-drawer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">v-list</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">v-list-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Navigation drawer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-list-item</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">v-list</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">v-navigation-drawer</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">v-main</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;min-height: 300px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-main</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">v-layout</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">v-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>