Home/ Documentation/ Vue Designer/ Tutorials & Courses/ Vuetify Card (Nuxt-powered)

Vuetify Card (Nuxt-powered)

Beautiful, accessible and powerful Vuetify components in action!

Start with this 40-mins quick video tutorial, organized into 20 concise chapters.

In this tutorial, we will build a beautiful Nuxt-powered Vuetify Card following a sample design from Vuetify card documentation page. This practical experience will help you uncover the vast capabilities of Vue Designer.

Resources Inputs

Source Card Design – Vuetify Card Documentation

Starter Template – Nuxt Vuetify – Quick start template (blank branch)

Final Output

Netlify Demo – Vuetify Card (Nuxt-powered)

Github Repo – Nuxt Vuetify – Quick start template (main branch)

Special offer for early adopters of Vue Designer

Take advantage of our time-limited launch offer with half off the regular price and free premium add-ons for Tailwind CSS and Vuetify.

And you get to keep this promotional price and add-ons for as long as your plan is active, not only for the first year.

Visit Vue Designer Homepage to take advantage of the launch offer

Here is a full list of chapters for your easy reference:

01Welcome
02Clone Nuxt Vuetify Blank Template
03Open Project in Vue Designer
04Card Image
05Card Title
06Card Subtitle & Icon
07Rating
08Card Text
09Chips
10State Binding
11Card Action
12Button Click Event
13Snackbar
14Dark Mode
15Preview
16Dynamic Theme Designs
17Build App
18Deploy to Netlify
19Tailwind & UnoCSS
20Thank You!


Last updated on September 28, 2023 at 7:54 pm


Print this article