https://github.com/webmasterdevlin/vuex-4-course
Vuex 4 in Vue 3 implementation
https://github.com/webmasterdevlin/vuex-4-course
bootstrap5 veevalidate vuejs3 vuerouter vuex4
Last synced: 10 months ago
JSON representation
Vuex 4 in Vue 3 implementation
- Host: GitHub
- URL: https://github.com/webmasterdevlin/vuex-4-course
- Owner: webmasterdevlin
- Created: 2020-07-26T06:16:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:29:19.000Z (over 3 years ago)
- Last Synced: 2025-08-29T23:59:59.211Z (10 months ago)
- Topics: bootstrap5, veevalidate, vuejs3, vuerouter, vuex4
- Language: Vue
- Homepage:
- Size: 2.41 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vuex 4 Course
```zsh
$ vue create project-name
```
Push to Github
## Migrate to Vue 3
```zsh
$ vue add vue-next
```
## Upgrade to latest npm packages
- Need version lense VS extension
- Go to package.json
- Upgrade all packages
```zsh
$ rm -rf node_modules
```
## Project setup
```zsh
$ npm cache clean -f
$ npm install
```
### Compiles and hot-reloads for development
```zsh
$ npm run serve
```
### Compiles and minifies for production
```zsh
$ npm run build
```
### What to build in order
- upgrade/migrate to Vue.js 3
- npm i bootstrap 5 alpha
- npm i bootstrap-icon
- Navbar
- Heroes (class card)
- npm i vue-router 4
- Router
- npm i vuex 4
- Setup Vuex 4 - hero module
- Get Request (v-for)
- Delete Request (class btn btn-danger)
- Post Request (Form)
- Put Request (editingTracker, v-if, v-else)
- npm i jsonwebtoken
- npm i -D @types/jsonwebtoken json-server-auth
- Setup Vuex 4 - auth module
- Register
- Login
- update auth service
- authGuard
- update router with meta requiresAuth and router BeforeEach
- ForgotPassword
- ContinueAs
- Done! Now do the Villain part with its own page and Vuex module.
### Vuex Setup
- create store
- write a module
- write a state
- npm i axios
- write an api service
- write a type
- write an action
- write a mutation
- write a getter
- update components with mapGetters and mapActions
- npm i concurrently json-server
- copy-paste db.json