Vue.js for Designers

Vue.js is a powerful, easy-to-use JavaScript framework that is component-based, just like React. This course will walk you through how to build a beautiful admin dashboard that you can use for your own data on the web. Create stunning charts, delightful animations, and powerful administrative commands. Full video tutorials: https://designcode.io/vue.

⚡️ Course Downloads

1. Intro to Vue.js
2. Global Styling with Sass
3. Single File Components
4. Dark Mode Part 1
5. Dark Mode Part 2
6. Animations and Transitions
7. Accounts with Netlify
8. Accounts with Slack
9. Charts and Data Visualization
10. Database with Firestore
11. Lambda Functions with Netlify

⚙️ Install Yarn and Vue CLI

Make sure that you have the Yarn installed, then install the Vue CLI:

yarn global add @vue/cli

If you have trouble with getting this project to run, please run the version of @vue/cli used in the course:

yarn global add @vue/[email protected]

✏️ Manage your Project from the Vue CLI GUI

After installing the Vue CLI, you can open the Vue Project Manager by using the following command:

vue ui

Note: If you are importing this project instead of installing a new project from scratch, first run yarn in your project to install the dependencies.

yarn

Then you can run the project with:

yarn serve

? Learning Vue.js

The Design+Code Vue.js course lives here. Start learning by creating this Web App!

Looking for more guidance? Full documentation for Vue is on their website. To see the documentation for the Vue CLL, which was used to create and configure this project, go here.

? Demo

Feel free to play around with the finished website at: https://vue-hq-2.netlify.app. The username is [email protected] and password is 123456789.

? Deploy

Launch this site to Netlify by clicking below! Or go to Netlify to deploy your own project.

? Q&A and Issues

Feel free to ask any questions or note issues!

• Fixing dark and light text
• Using rem units instead of px