2orerz024 Sealing the app - Real World Vue 3 | Vue Mastery
Scaling the app
We've reached the final lesson of this course, and | want to congratulate you for following along until the
end, We've built a simple yet solid Vue app and deployed it out into the world. So where do we go from
here? There are a number of features we could add, and additional concepts within the Vue framework
(and ecosystem of tools) to learn. So what should a Vue developer master next?
In this lesson, I’m going to give a tour of what potential next steps we could take to scale up our app in
different directions. This will simultaneously provide some guidance around how to continue with your
Vue learning journey and how to best utilize the Vue Mastery platform to level up your skills.
What’s next?
Ifyou take a look at our courses page, you've probably already noticed we have our library of content
arranged in different paths. These paths are arranged in the suggested order for consuming our courses.
Having said that, your ideal next course ultimately depends on your current needs and pressing interests
So let's explore some of the main Vue concepts and how a number of our course addresses them.
Vue 3 Forms
Ifwe continued building out our Events for Good app beyond this course, we'd need a production-ready
form that enables users to create new events. Forms are arguably one of the most important parts of any
app, allowing us to intake important information from our users. A well done form (or a poorly done form)
can ultimately affect a company’s bottom line in significant ways.
When building forms with Vue, you don’t just want to build a form that serves a specific purpose. You'll
want to know how to build a set of base form components that are highly reusable so they can be used
and reused in a modular way throughout any of your Vue apps.
From inputs to checkboxes and radio buttons, our Vue 3 Forms course walks through best practices as
you develop a set of form components you can take with you into any of your future projects.
Mastering Vuex
Ifwe've implemented the ability for users to create new events, we'll want a nice global location to store
those events once they're created. As our app’s component tree grows, it becomes increasing harder to
manage the data within our app; as it’s created, updated, and displayed. This brings us to Vuex: Vue's
official library for state management.
When we created our project with the Vue CLI, we selected Vuex. But what purpose, exactly, does it serve?
tps. vwemastory.comicoursesireal-worlt-wueS/scaling the-app usSealing the app - Real World Vue 3 [V1
ane
ar
vreaL. 4H oO @
oy
PIL od
7 sre
7 w
Cr a
router
poo pig Vuex
or
ENS - State Management
mainjs
SOR)
Pe Rein
cece a
ce col
te tae)
‘As a Vue app grows, and you have more and more views and components within those views, you'll need
to have a reliable and predictable way to manage how that data is stored, sent around, and changed,
within your app.
Notice how this store folder was installed into our project by the CLI. You can think of Vuex as
the storage center for data throughout your app. Let's look inside the store’s index,j
Dstore/index.js
import { createStore } from
export default ae
cn
ct
{},
a
tps www. vwemastary.comicoursesireal-world-vuedlecaling-the-app2orerz024 Sealing the app - Real World Vue 3 | Vue Mastery
In short, the store provides us with what we need to keep track ofthe state of things within our app,
and update that state in an organized modular way that is predictable and traceable.
Our Mastering Vuex course walks you through how to effectively use this state management library so
things don’t get messy as you scale up your app’s data needs.
Please be aware that this course’s example app uses an earlier Vue 2 version of the app we built in this
course, The reason we do not have a Vue 3 version of our Vuex course is because there has not been a
major reworking of Vuex for Vue 3. The syntax for how Vuex is used and the concepts behind how it works
are all the same whether you're using Vue 2 or Vue 3. If you take the Mastering Vuex course and code
along with it, I do suggest you use the example app from this Real World Vue 3 course and add the new
Vuex features to it.
Touring Vue Router
While we covered the essentials of Vue Router in this course, I've mentioned how there are plenty more
navigation-based abilities available to us with this handy routing library, and our Touring Vue
Router course covers many of them.
tps. vwemastory.comicoursesireal-worlt-wueS/scaling the-app
ais2orerz024 Sealing the app - Real World Vue 3 | Vue Mastery
Events | About
Events for Good
@11:00 on July 22, 2022
Beach Cleanup
@12:00 on August 28, 2022
Dog Adoption Day
< Previous Next >
So if your app needs features like pagination, guards on certain routes that limit user access, or if you
need to enable programmatic navigation or nested routes, this course takes you beyond the essentials
and tours various features within this routing toolset.
tps. vwemastory.comicoursesireal-worlt-wueS/scaling the-app2orerz024 Sealing the app - Real World Vue 3 | Vue Mastery
Beyond the beginner’s path
Ifyou take the courses outlined so far, you'll have broadened and reinforced your knowledge of
fundamental production-level Vue practices. You'll then be ready for our more intermediate courses that
cover everything from strengthening your Vue apps with Unit Testing, to adding User Authentication, and
integrating with popular libraries within the Vue,js ecosystem such as Nuxt.js and Vuetify.
You’ve made it
With that, | hope you feel clear about what your next steps are on your path to Vue Mastery. I wish you
well as you level up your skills and expand the opportunities that become available to you as you become
increasingly skilled with this powerful JavaScript framework. See you in another course!
tps www. vwemastary.comicoursesireal-world-vuedlecaling-the-app 55