Introduction
In this blog post, we will learn how to use vue js to create a simple event booking application and also integrate Flutterwave as the payment gateway. In this application, a user will be able to register, log in and also reset password in case if a user forgot his password. Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
Prerequisite
- Node installed in your local machine
- Basic knowledge of JavaScript and Vue
- Install Vue CLI on your local machine
- create an account on Flutterwave
Install and setup Vue
Let's setup our environment so we can get up and running with our event application
`npm install -g vue-cli`
To create a new vue project we can use the command below to start our own event project
`vue create event-booking-app`
You will be asked to select some options while creating your project. You can either go by the default setting or select the option manually.
`cd event-booking-app`
Navigate to the project directory
Finally serve the vue js development server with
`npm run serve`
Setting up Axios
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "../src/assets/css/style.css";
import axios from "axios";
axios.defaults.baseURL = "<endpoint>";
Vue.use(require("vue-moment"));
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
Fetching events from the API
<script>
export default {
name: "index",
data() {
return {
events: [],
};
},
mounted() {
this.fetchEvents();
},
methods: {
fetchEvents() {
axios
.get(
"https://app.ticketmaster.com/discovery/v2/events?apikey=j3NtHIoBfApjHU0wjFnjENfU3VNu9K3i&keyword=Tech&locale=en&size=50&countryCode=US"
)
.then((res) => {
this.events = res.data._embedded.events;
console.log(res.data._embedded);
})
.catch((error) => {
console.log(error);
});
},
</script>
Implementing search
In our project, we have been able to fetch events from the API but we need to search through the events for easy accessibility. Create a computed property and include the code snippet below
computed: {
resultQuery() {
// console.log(this.searchEvent);
if (this.searchEvent) {
const filtered = this.events.filter((item) =>
item.name.toLowerCase().includes(this.searchEvent)
);
return filtered;
} else {
return this.events;
}
},
},
Authentication
Adding authentication will enable users to sign up and login into the event booking application.
Sign In Component
<template>
<div class="login_container">
<div class="inputformrow">
<label>Email address</label>
<input type="email" placeholder="user@email.com" v-model="user.email" />
</div>
<div class="inputformrow">
<label>Password</label>
<input
type="password"
placeholder="Enter Password"
v-model="user.password"
/>
</div>
<div class="inputformrow">
<p class="forgotpassword">Forgot your password?</p>
</div>
<div class="inputformrow">
<button class="loginbutton" @click="signin()">Login</button>
<div class="login_alternative">
<p>Don't have an account? <span >Sign Up</span></p>
</div>
</div>
</div>
</template>
export default {
data() {
return {
user: {
email: "",
password: "",
},
};
},
};
methods: {
signin() {
this.$store
.dispatch(signin, {
email: this.user.email,
password: this.user.password,
})
.then(() => {
this.$router.push({ name: "index" });
})
.catch((error) => {
console.log(error.response.data.error);
// this.error = error.response.data;
});
},
},
Sign Up Component
<template>
<div class="signup_container">
<div class="inputformrow">
<label>First name</label>
<input type="email" placeholder="first name" v-model="user.f_name" />
</div>
<div class="inputformrow">
<label>Last name</label>
<input type="email" placeholder="last name" v-model="user.l_name" />
</div>
<div class="inputformrow">
<label>Email address</label>
<input type="email" placeholder="user@email.com" v-model="user.email" />
</div>
<div class="inputformrow">
<label>Phone number</label>
<input
type="tel"
placeholder="(xxx)-(xxx)-(xxx)-(xxx)"
v-model="user.phone"
/>
</div>
<div class="inputformrow">
<label>Country</label>
<input type="number" placeholder="Nigeria" v-model="user.country" />
</div>
<div class="inputformrow">
<label>Password</label>
<input
type="password"
placeholder="Enter Password"
v-model="user.password"
/>
</div>
<div class="inputformrow">
<button class="signupbutton" @click.prevent="signup()">
Create Account
</button>
<div class="login_alternative">
<p>
Don't have an account?
<span @click="$router.push('/login')">Login</span>
</p>
</div>
</div>
</div>
</template>
export default {
data() {
return {
user: {
f_name: null,
l_name: null,
email: null,
phone: null,
country: null,
password: null,
},
};
},
};
methods: {
signup() {
this.$store
.dispatch(signup, {
f_name: this.user.f_name,
l_name: this.user.l_name,
email: this.user.email,
phone: this.user.phone,
country: this.user.country,
password: this.user.password,
})
.then(() => {
this.$router.push({ name: "login" });
});
},
},
Implementing Vuex
Conclusion
We have been able to create a simple event booking application with help of vue and Flutterwave
Top comments (1)
Really interesting.
Thanks for sharing!