VueJS Vuetify Vue Router Vuex - Basic Project Skeleton

VueJS Vuetify Vue Router Vuex - Basic Project Skeleton

VueJs, Vuetify, Vue Router and Vuex skeleton MVP written on JavaScript using async/await built to work with API REST skeleton:

VueJS Vuetify Vue Router Vuex - Basic Project Skeleton

Getting started

This is a basic VueJs, Vuetify, Vue Router and Vuex skeleton written on JavaScript using async/await. Great for building a starter web app.

This project is created to help other developers create a basic VueJS app in an easy way. This basic example shows how powerful and simple JavaScript and VueJS can be. Do you want to contribute? Pull requests are always welcome to show more features.

Buy me a coffee

Hi! I'm Daniel Avellaneda, I'm an open source enthusiast and devote my free time to building projects in this field.

I'm the creator and maintainer of node-express-mongodb-jwt-rest-api-skeleton and vue-skeleton-mvp

These projects are a "starter web app kit" for any developer who wants to build their own app without starting from scratch: API + Frontend

Both projects have been downloaded thousands of times by web developers around the world.

I'm doing my best to provide you a good experience when using my apps, so if you like what I'm doing and wish to say "thanks!", please buy me a coffee ☕

Feel free to send me a tweet https://twitter.com/davellanedam, share this with others or make a pull request

Features

  • Vuetify
  • Multiple environment ready (development, production).
  • Vue router
  • Vuex
  • i18n ready.
  • Google Analytics ready.
  • Ready to add to home screen in iOS and Chrome, checks if there´s an app update every 2 hours and reloads page (When a web app is added as stand alone there´s no reload button in the browser so new .js files from a new build never get loaded)
  • Landing page.
  • Protected home page.
  • Login.
  • Signup.
  • Forgot password.
  • Account verification.
  • User profile.
  • Users admin area with CRUD operations.
  • Cities admin area with CRUD operations.
  • Testing with Cypress and mocha/chai.
  • NPM script for keeping good source code formatting using prettier and ESLint.
  • Use of ESLint for good coding practices.
  • Use of prettier for beautiful format.
  • Ability to refresh token
  • JWT Tokens, make requests with a token after login with Authorization header with value Bearer yourToken where yourToken is the signed and encrypted token given in the response from the login process.

Demo

A demo of this Frontend is located at: https://vue-demo.daniel-avellaneda.com

Login credentials

email: [email protected] password: 12345

IMPORTANT: Database resets every 30 mins like "12:00am, 12:30am, 1:00am" and so on. So anything you do will be lost after a short time.

Demo is also linked to a Node.js express.js MongoDB JWT REST API project that shows how this frontend can be integrated to an API. Repo is here: https://github.com/davellanedam/node-express-mongodb-jwt-rest-api-skeleton Running demo is here: https://api-demo.daniel-avellaneda.com

How to install

  1. Clone the project from github. Change "myproject" to your project name.
git clone https://github.com/davellanedam/vue-skeleton-mvp.git ./myproject

Using manual download ZIP

  1. Download repository
  2. Uncompress to your desired directory

Install npm dependencies after installing (Git or manual download)

cd myproject
npm install
npm update

VERY IMPORTANT

This project uses Vue Router HTML5 History Mode, this means when you are in development mode you can hit Cmd+R (mac) or F5 (Windows) to reload the page and it will work, but when the project is built you will have problems, so will need to do a small change in your web server to make that work. Please read the official Vue Router documentation here: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Formatting markdown files

npm run remark

Run your end-to-end tests

npm run test:e2e

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

Bugs or improvements

Feel free to report any bugs or improvements. Pull requests are always welcome.

Download Details:

Author: davellanedam

Source Code: https://github.com/davellanedam/vue-skeleton-mvp

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.