Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5 Vue.use(BootstrapVue); Vue.use(Vuetify); Vue.config.productionTip = false; /* eslint-dis ...

Building the Real Application Chapter 5 Creating an Add movie form First, we need to add a link that takes us to a form to add t ...

Building the Real Application Chapter 5 Here, we added a route for AddMovie, which now means that we can access the add movie pa ...

Building the Real Application Chapter 5 Add the following code to AddMovie.vue inside the script tag: <template> ... </ ...

Building the Real Application Chapter 5 The first basic validation is the required validation: <v-text-field label="Movie Nam ...

Building the Real Application Chapter 5 This adds items to the select list dynamically through the script. As regards the last p ...

Building the Real Application Chapter 5 mode: 'history', routes: [ { path: '/', name: 'Home', component: Home, }, { path: '/cont ...

Building the Real Application Chapter 5 The next part is to create the necessary endpoints and models so that we can add the mov ...

Building the Real Application Chapter 5 const port = process.env.API_PORT || 8081; app.use('/', router); app.listen(port, functi ...

Building the Real Application Chapter 5 Until now, we have our frontend server up and running on port 8080 with the following: $ ...

Building the Real Application Chapter 5 }); const Movie = mongoose.model('Movie', MovieSchema) module.exports = Movie; Here, we ...

Building the Real Application Chapter 5 Since these controllers have the routes, we need to include these files in our main entr ...

Building the Real Application Chapter 5 Installing axios Now, in order to communicate between the client and the server, we will ...

Building the Real Application Chapter 5 }, ... All the methods that we will have will be added in this section. Now that we have ...

Building the Real Application Chapter 5 .catch(() => { }); } return true; }, clear() { this.$refs.form.reset(); }, }, }; < ...

Building the Real Application Chapter 5 In AddMovie.vue, let's add the rules in input fields and bind the rules from the script: ...

Building the Real Application Chapter 5 release_year: '', nameRules: [ (v) => !!v || 'Movie name is required' ], genreRules: ...

Building the Real Application Chapter 5 } }, clear () { this.$refs.form.reset() } } } </script> Now, if we try to submit t ...

Building the Real Application Chapter 5 Adding a flash message We have covered the basics of app building. Now that we can add a ...

Building the Real Application Chapter 5 Now, let's modify our AddMovie.vue to display the flash message when the action is perfo ...