How to Build a Restaurant Menu App in Nuxt & Vuex using Cosmic JS

In this tutorial, I’m going to show you how to create a using , , and . It is hosted on the Cosmic JS App Server. We will be using Cosmic JS npm package for implementing the basic CRUD for our objects and to retrieve data and media from Cosmic JS. Let’s get started. Restaurant Menu App Vue2 Vuex Buefy Cosmic JS Download the GitHub repo.! Check out the demo Prerequisites You will be requiring to install Node JS and npm before starting. Make sure you already have them. Getting Started Doing everything using the existing git repo First of all, you have to be sure you have node > 6.x installed, than run the following commands: After successfull completion of the last command browser window will automatically open will look like this. package.json What we’re installing and why We’re going to use and libraries to create components and manage state. vue vuex We’re using package to make async requests to Cosmic JS for deleting media in a loop. async We’re using package to create our layouts using vue components. buefy We’re going to use library to handle our requests to our Cosmic JS bucket. Cosmic JS is used for form validation. vee-validate is used for server side rendering. nuxt Building our app Now we will set up our nuxt.config.js in our root directory where we will change the favicon and set the other basic properties for the app link build properties and linting etc. Also we will include the external CDN’s required for the app. Below is the nuxt.config.js file. Setup default.js default.js in the layouts directory is the starting point in all the app. Here we include master view attributes like navbar and footer. the important thing here is the nuxt tag will initiate all the pages depending upon the route. In the script section in beforeMount we have called the actions that we need to be called when the application loads. Here ‘getMenus’ is worth noting. This action fetches the menu for the current date when application is launched. We have also exposed the store to the vue components. Routing When using nuxt.js we do not need to worry about creating the routes. Nuxt do the job for us. We need to follow the file directory rules described by nuxt and it will create all the necessary routes for us. For more information visit Nuxt documentation Setup index.vue is the first page that will render. I have used buefy components for UI. You can check their documentation . Most important code block here to include landingpage component in the template . This piece of code will render the LandingPage component. \pages\index.vue here Vuex Moving ahead first I will discuss about Vuex and why we should use that. You can obviously use simple state and props for smaller applications. But for large applications we must use some kind of state management like redux in React. Vuex is maintained by vue team and it is widely used. Today we will use that. Below is the Vuex flow diagram that I will explain. There are four main concepts in vuex. State Actions Mutations Getters is where our whole application state/data will be store. So how it will work? For example, you are using this store in you component and want to change some state value. You have to dispatch an . Then will commit the and it will change the state. So why action is needed, we can change state directly in mutation. Action is very important. We need actions when we have to call any async function and then on its success change the state. In case of API we consume request in actions and commit mutation to change state. It is very simple but very import to follow. State action action mutation are simple getter function to get value of state in components. If you need one state value in different components so it is better to create getter for it and use that getter in component as computed property. Getters It is convention to create vuex folder and then create store.js in it. So I did the same and created . store/store.js This is an abbreviated version of “How to Build a Restaurant Menu App”. The full version is available on Cosmic JS. . Click here to view the full article Conclusion This is a basic app for a restaurant menu built using vue , vuex , Cosmic JS and nuxt.js. I hope you liked the tutorial and will be helpfull for you.