Vue for Designers

Learn how to build a web app and admin dashboard using your own data on the web. Create stunning charts, delightful animations, and powerful administrative commands. Use advanced techniques to achieve dark mode and a complete login system.

We decided to go with Vue to develop a beautiful, custom admin dashboard. In this course, you'll learn to create animated components, dark mode, a login system, and data visualization.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.



Why this course?


Throughout this course, you may use your own assets, styles, and design. Or, if you prefer to follow the course exactly, you can download the Vue project code and the Figma file, which contains all the design assets.

Install Node and Yarn




Then install Yarn by using the following command:

$ brew install yarn


The Vue CLI is a command line toolbox that provides support for Vue projects with a graphical user interface (GUI) to manage projects. To download it, use the following command:

$ yarn global add @vue/cli


Open the Vue Project Manager by using the following command:

$ vue ui


Vue-Intro1

From here, follow these steps:


  1. Go to the "Create" tab.
Vue-Intro2
  1. Go into your Documents folder and hit the button at the bottom called "Create a new project here".
Vue-Intro3
  1. Now name your project. I named mine "vue-admin-dashboard". Leave the settings at default and hit next.
Vue-Intro4
  1. Select "Manually select features". Hit next.
Vue-Intro5
  1. Turn on Router, Vuex, and CSS Pre-processors. We will use these in our project for page routing, dark mode, and styling, respectively. Hit next.
Vue-Intro6
  1. Turn on history mode for router for nice URLs, select "Sass/SCSS(with node-sass)" as the CSS pre-processor, and select "ESLint + Prettier" as the linter/formatter config.
Artboard
  1. Hit the "Create Project" Button and choose if you would like to save the preset or not. I will continue without saving.
Vue-Intro8

Great! We're now in our Project dashboard. All the configuration is now done, and it's time to run the project to see what we're working with. Here's how we do that:


  1. Go to "Tasks" on the left menu and click on "serve" in the Project tasks.
Vue-Intro9
  1. Hit the "Run task" button. Wait a little for the site to build, then hit "Open app".
Vue-Intro10
Vue-Intro11

Final Thoughts

Congratulations! You've just successfully configured and run your first fully-functional Vue website. Setting up is always challenging, and sometimes it's the hardest part about building websites. However, the Vue team has done a great job making the process as smooth as possible.
Now comes the exciting part – customizing our Vue app!