Module title: VUE.

JS
FRAMEWORK
Competence: Develop a simple game in Vue

https://vuejs.org/guide/essentials/lifecycle.html
https://vuejs.org/guide/scaling-up/state-management.html
 Learning outcome 2: Apply
vue.js framework
LEARNING INDICATIVES
 Routes are correctly created in line with project pages
 Reusable components are correctly developed in accordance with most reusable HTML elements
 Form data are properly handled based on user story
 Form data are correctly validated based on user stories
 Features are correctly developed in accordance with user stories
 API requests are correctly made in accordance with user stories
 State of data is appropriately managed in accordance with user stories
Definition of key concepts
Components
Component is Vue instances with custom HTML elements.
It can be reused as many times as you want or used in another
component as child component.
Data, computed, watch, and methods can be used in any Vue
component.
Components are reusable independent pieces of your application UI.
Components script element
• Data:
• Computed: Computed properties allow us to declaratively compute
derived values.
• Watch: used to call a function whenever a reactive property changes.
• Methods: list all functions/methods each performing a specific task.
Definition of key concepts
Routes:

Vue Router helps link between the browser's URL/History and Vue's
components using certain paths.
It icommonly used in building Single Page Applications (SPA).
Definition of key concepts
Vue lifecycle
Each Vue component goes through a series of initialization steps when
it's created.
Those steps includes:
• data observation
• compile the template
• mount the instance to the DOM
• update the DOM when data changes
Definition of key concepts
State management

Vuex is a state management pattern.

State management serves as a centralized store for all the components
in an application.
Definition of key concepts
API Endpoint

API Endpoint is a point at which an API connects with the software

program.
• It provide specific location of the resources that need to be accessed.
Definition of key concepts
.env file
.env file is vue file that stores all of environment variables.

• it is typically private and can be used to store things like API keys,
URLs, and other things that are specific to one environment.
Definition of key concepts
Parameter for router

Route parameters are named URL segments that are used to capture
the values specified at their position in the URL.
Definition of key concepts
Declarative navigation

Created by <router-link> in your single page application

Definition of key concepts

mixin
mixin is a Vue object in a separate file that contains code we want to
reuse across multiple components.
Folder structure
Inside src folder
• Assets,components,router and view are folder
• App is top level components, main is js file connecting html file with
app.vue.
Project folders description
• Assets: holds all files like images, logo, css or js that are usefully for
project.
• Components: holds all components for project
• Router: contain js file that create array of routers single page
application.
• View: holds all view components that will be used in single page
application.
Apply Vue component structure
Components structure has 3 main parts:

Templates
CSS style
JavaScript
Example of component
<script setup>
</script>
alert("Welcome")
<template>
<main>
this is home page
</main>
</template>
<style>
Main{
Background-color: yellow;
Text-align: center;
}
</style>
Apply navigation in Vue project using router
Install Router package (vue-router)

Vue-router is installed in project folder by running npm install

vue@latest command and confirm its installation by selecting yes
Create javascript file in router folder
• Javascript file inside router is file that create the array of all required
router.
• Each router has path,component and name
Example: object for router of Homeview
{
path:”/”,
name:”home”
component:”HomeView”
}
Description of js file in router folder
import { createRouter, createWebHistory } from 'vue-router‘
 This line load createRouter and createWebHistory from vue-router.

List of View_component_name
 This includes all view component that will be used in routing router.

(c) const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),
routes: [
object for each router
 Object of router each with path,name and component
]
})
 This create routes for router

export default router

Eaxmple of js file in router
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import Contact from '../views/Contact.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{path: '/about',
name: 'about',
component: AboutView
},
{
path: '/contact',
name:'contact',
component: Contact
},
]
})

export default router

After creating router in js file inside router folder, it can
be used.
• Router is linked to the other component using <RouterLink>
• View components corresponding to selected routerLink is open in
RouterView.

< RouterLink > is the component for enabling user navigation in a

router-enabled app. It perform as an <a> tag with correct href.
< RouterLink > has to prpperty that swpecify the target path for router.
It is commonly used to create declararative navigation.
Example: < RouterLink to=“/about” > < /RouterLink >
Example for enabling router in app.vue
App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
<header>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/about/20">About to</RouterLink>
<RouterLink to="/contact">contact us</RouterLink>
</nav>
</header>

<RouterView />
</template>
export default{
name:"App",
}
After enabling router to be accessed in
App.vue, components is mounted in html
• Using main.js, the main javascript file that connect component with html file.

Main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')
Index.html, with id called app
• It is the top level html file open in browser
• It is connected with main.js that mount all necessary data in specified
element.

Sample index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Router</title>
</head>
<body>
<div id="app"></div>
<script type="module" Index.html is connected
src="/src/main.js"></script> with main.js here

</body>
</html>
Nested router

• Some applications' UIs are composed of components that are nested

multiple levels deep
• in this case, it is very common that the segments of a URL correspond
to a certain structure of nested components
Example of nested router
• /user/profile • /user/post
Creation of nested router in vue
const routes = [
{
path: '/user',
component: UserView,
children: [
{
path: 'profile',
component: UserProfile,
},
{
path: 'posts',
component: UserPosts,
},
],
},
]
Notice:

UserPosts will be rendered inside User's <router-view> when

/user/posts is matched
UserProfile will be rendered inside User's <router-view> when
/user/profile is matched

Inside UserView.vue <RouterView/ > must be included because children

components are loaded inside UserView component
Example of sample code in UserView.vue
<template>
<div class="about">
<h1>User Page</h1>
</div>
<div class="container"><RouterView /></div>
</template>
Use of parameters inside router
Real situation:

we may have user component which should be rendered for all users but
with different user, in this case router for user component will have
parameter for user.
Router with parameter
const routes = [
{
path: '/user/:id',
name:’user’
component: UserView,
},

]
export default router
In RouterLInk user id is added to the path

<RouterLink to="/user/20">User</RouterLink>
Router with 2 parameters
const routes = [
{
path: '/user/:id/:name',
name:’profile’
component: UserView,
},
]
export default router
Router with two parameters in routerLink

<RouterLink to="/user/20/john">User</RouterLink>
Accessing parameter inside the router
• In vue.js, parameters inside router are accessed using
$route.params.parameter_key
Example:
$route.params.id
$route.params.name
JavaScript code for accessing router Accessing id

parameters in UserView:
Accessing id

Code inside UserView.vue, view component rendered when router with

id and name as parameters is enabled.
Accessing data() and created() method to
access router parameters
Userview.vue
<template>
<main>
<h1>User has id:{{id}}</h1>
<h1>User has username:{{name}}</h1>
</main>
</template>
<script>
export default{
data(){
return{
id:'', Data method holding all variables
name:'',
}
},
created(){
this.name=this.$route.params.name created method for
this.id=this.$route.params.id changing the value of
}, variable
}
</script>
404 page

• It's commonly used to show a 404 error page if a user goes to a wrong
path that is not on website.
• 404 error page is used to show the user a not found page instead of a
blank page.
Creating router for 404 page
• Router for 404 page is similar to routers for any other view component.
• The path for this router is: path: '/:pathMatch(.*)*‘

Example:
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: PageNot
},
If rendered path is not found below result is
generated
Data manipulation in Vue
https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html
Importing necessary packages and
components
Importing components require the use of import
Syntax: import MyComponent from 'my-component‘

Example: import UserView from './UserView.vue'

Importing package
Syntax: import package from ‘package‘
Example: import { createApp } from 'vue'
Apply vue lifecycle methods
In vue, there are 8 vue lifecycle methods such as:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
BeforeCreate

BeforeCreate is the first lifecycle method that gets called in Vue JS.
• It is called after a new Vue instance/component is initialized.
• Computed, watchers, events, data properties are not set up.
Example
<script>
export default {
beforeCreate() {
console.log('beforeCreate hook called');
}
}
</script>
Created

Created is the next lifecycle method that gets called after

the beforeCreate method.
• Computed, watchers, events, data properties can be activated.

• I this lifecycle it is possible to access the data properties that were

not accessible in beforeCreate method.
Example:
<script>
export default {
data() {
return {
msg: "Hello World",
}
}
created() {
console.log('created hook called', this.msg);
}
}
</script>
BeforeMount
BeforeMount is the next lifecycle method that gets called after
the created method.
it is called before the Vue instance/component is mounted on the
Document Object Model (DOM).

The template and the styles of any instance/component are all compiled
here, but the DOM cannot be manipulated yet.
Example
• <script>
export default {
beforeMount() {
console.log('beforeMount hook called');
}
}
</script>
Mounted
mounted is the next lifecycle method that gets called after
the beforeMount method.

• It is called after the Vue instance/component has been mounted.

• The app component or any other components become functional.
Example
• <script>
export default {
mounted() {
alert('mounted has been called');
}
}
</script>
BeforeUpdate

BeforeUpdate is the next lifecycle method called after the mounted

method.

It is called any time a change is made to the data that requires the DOM
to be updated.
Example
<template>
<p>
{{ msg }}
</p>
</template>

<script>
export default {
data() {
return {
msg: "Hello World",
}
},
beforeUpdate(){

this.msg='beforeUpdate hook called'

}
}
</script>
Updated

Updated is the next lifecycle method called after the beforeUpdate method.

It is called just after a DOM update has occurred.

Example
<template>
<p>
{{ msg }}
</p>
</template>

<script>
export default {
data() {
return {
msg: "Hello World",
}
},
beforeUpdate(){
console.log('beforeUpdate hook called');
},
updated(){
console.log('updated hook called');
},
mounted(){
this. ＄ data.hello= 'This is Shubham Kshatriya!';
}
}
</script>
BeforeDestroy

The beforeDestroy method is called just before a Vue instance/component

is destroyed.
Example
• <script>
export default {
data() {
return {
msg: "Hello World!",
}
},
beforeDestroy() {
this.msg = null
}
}
</script>
Destroyed

destroyed is the last stage lifecycle method, where the entire Vue
instance/component gets destroyed.

Event listeners, mixins, and all directives get unbounded here.

Use vue layout components
Layout component
The layout component is a component used to share a common section
across multiple pages.

• It can component for application header, footer or sidebar.

• Layout component is common to more than one page.
Sample layout component
HeaderView.vue
<template>
<header>
<div class="wrapper">
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<h1>
Welcome to layout component
</h1>
</div>
</header>
</template>
Example of layout component
FooterView.vue
<template>
<footer>
<div class="wrapper">
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125"
height="125" />
<p>CopyRight 2023,rugando</p>
</div>
</footer>
</template>
Sample of sharing layout component to other
components
AboutView.vue

<script setup>
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue' Header is called
</script> here

<template> Footer is called

<HeaderView></HeaderView> here
<div class="container">About us</div>
<FooterView></FooterView>
</template>
Sample result:
Contact