Setting up a Nuxt project with Vuetify

Open a new command prompt/shell window and run the below command to create a new Nuxt project:

npx create-nuxt-app <project-name>

You can choose to install Vuetify at the same time you bootstrap the Nuxt app. If not you can do it later by installing Vuetify as a Nuxt module as shown below:

npm install @nuxtjs/vuetify -D

Once the project is created (and Vuetify is installed), update your nuxt.config.js file to include the Vuetify module in the build:

// nuxt.config.js - Simple vuetify configuration
{
  buildModules: [
    '@nuxtjs/vuetify'
  ]
}
// nuxt.config.js - Vuetify configuration with options
{
  buildModules: [
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

If you’ve chosen to install Vuetify as part of the Nuxt app creation process (create-nuxt-app command above), then the above configuration should be already done by that command.

To get started and test things out, replace the layouts/default.vue template with the boilerplate Vuetify template as shown below:

<template>
  <v-app>
    <v-system-bar height="80" app>
      <v-spacer />

      <v-icon>mdi-square</v-icon>

      <v-icon>mdi-circle</v-icon>

      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>

    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-sheet
        color="grey lighten-4"
        class="pa-4"
      >
        <v-avatar
          class="mb-4"
          color="grey darken-1"
          size="64"
        />

        <div>[email protected]</div>
      </v-sheet>

      <v-divider />

      <v-list>
        <v-list-item
          v-for="[icon, text] in links"
          :key="icon"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <v-container
        class="py-8 px-6"
        fluid
      >
        <nuxt />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: null,
    links: [
      ['mdi-inbox-arrow-down', 'Inbox'],
      ['mdi-send', 'Send'],
      ['mdi-delete', 'Trash'],
      ['mdi-alert-octagon', 'Spam']
    ]
  })
}
</script>

Next, update pages/index.vue with the below template:

<template>
  <v-row>
    <v-col
      v-for="card in cards"
      :key="card"
      cols="12"
    >
      <v-card>
        <v-subheader>{{ card }}</v-subheader>

        <v-list two-line>
          <template v-for="n in 6">
            <v-list-item

              :key="n"
            >
              <v-list-item-avatar color="grey darken-1">
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>Message {{ n }}</v-list-item-title>

                <v-list-item-subtitle>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus distinctio similique
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-divider
              v-if="n !== 6"
              :key="`divider-${n}`"
              inset
            ></v-divider>
          </template>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data: () => ({
    cards: ['Today', 'Yesterday']
  })
}
</script>

Finally, you can run Nuxt’s dev server to see your Vuetify powered new page in action in the browser.

Here’s the link to the official documentation reference with boilerplate markup to start with setting up the layout:
https://vuetifyjs.com/en/components/application/#default-application-markup

Happy Coding! 👋👋👋

Was this helpful?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0