Made withOctober CMSClip

Creating Vue, Vuex and October CMS App - 02 - Vue Setup

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

10K viewsOct 9, 201813:28 runtime

Learn to set up a complete Vue.js frontend for your October CMS application. This guide walks you through installing and using the Vue CLI to create a new Vue project, selecting essential features like Vuex, the Vue Router, and SASS. You'll also learn how to install and…

Chapters

#octobercms#clip#cmscrm

Vue CLI Management

Check current version: Use vue --version to see which version of Vue CLI is installed.
Update to the latest version: If you have an older version, it's best to update. First, uninstall the old package, then install the new one.
1. sudo npm uninstall -g vue-cli (For versions before 3.x)
2. sudo npm install -g @vue/cli (For version 3.x and above)

Creating the Vue Project

Creation command: Use vue create app to start the project setup wizard.
Manually selected features: The video recommends manually selecting features for more control.
- Babel
- Router (with History Mode enabled)
- Vuex
- CSS Pre-processors (Sass/SCSS with node-sass)
- Linter / Formatter (ESLint with Standard config)

Tip
For better project organization, choose to place configuration for tools like Babel and ESLint in dedicated config files rather than in package.json.

Connecting to the October CMS API

Install Axios: The axios library is used for making HTTP requests to the API. Install it with npm install axios.

Fetch data: Import axios into your Vue component and use it within a lifecycle hook like mounted to fetch data when the component is loaded.

import axios from 'axios'

export default {
  mounted() {
    axios.get('http://api.vuerentacar.localhost/api/vehicles')
      .then(response => {
        // The actual data is in the `data` property of the response
        console.log(response.data)
      })
  }
}

Solving Cross-Origin Resource Sharing (CORS) Errors

Important
An error message like No 'Access-Control-Allow-Origin' header is present on the requested resource is a browser security feature. It indicates a server-side configuration issue and must be resolved on the API backend (October CMS), not in the Vue app.

Solution in October CMS:
1. In the October CMS backend, navigate to Settings > Updates & Plugins.
2. Search for and install the CORS plugin.
3. After installation, go to the plugin's settings page.
4. In Allowed Origins, add * to allow requests from any domain (suitable for development).
5. In Allowed Methods, add the HTTP methods your app will use, such as GET, POST, PUT, and DELETE.

Introduction & Vue CLI Setup

In the last episode, we set up October and we got our API going, so it's this one right here. So in this episode, we are going to set up the view side of things and we are going to connect to that API just to see if everything works. And then in the next episode, we can get to real work.

So first of all, let's check out what version of Vue CLI do we have installed on our system, if any. So if you do something like vue --version, then you would get the version of the Vue CLI that you are using. I'm currently using 3.0.4, but if you're using anything below that or below 3.0, then you should install a new version. If you don't have Vue CLI at all installed on your system, then you can just do something like sudo npm install -g @vue/cli. But if you already have it, then before running this command, you would run sudo npm uninstall -g vue-cli. So you would run that command first and then install Vue CLI again and then you should get the newest version of Vue CLI.

Creating a New Vue Project

Okay, so now that you got that out of the way, let's create our View application. So we are in vuerentacar directory. If we ls it, you can see that we have an API, this is our October installation, and now we need to install our app, or create our app. We are going to call it app actually. So to do that, you just do vue create app or whatever you want to call your View application. You can maybe call it app-rentacar or view-rentacar or whatever, but I'm just going to call it app.

And now Vue is going to ask us some questions, and we are not going to be using the default setup, but we are going to manually select our features. So we want to select Babel, of course, then we want to have a linter, we want to have CSS pre-processor, we want to have Vuex, which we are going to be using in this series, and then we have a router. Okay, press enter. Use history mode? Yes, you will see what that is used for. And then you need to pick a CSS pre-processor. In our case, it's going to be Sass/SCSS, and then I'm just going to use the standard configuration for ESLint, although for an optional step in this tutorial, I'm going to show you how to install bubblint, which is a linter that I use in my company. So it's just easier for me, but you can skip that step if you don't want to have any linter or whatever, or you maybe want to use Airbnb's linter. So I'm just going to use standard.

Lint on save? No... actually, lint on save, yes. And where do we want to place configurations for Babel, PostCSS, ESLint, and so on? So I'm just going to set it to be in dedicated config files, else not in package.json. And do you want to save this preset? No. Okay, so now Vue is going to install.

Running the Dev Server

Okay, so now that the Vue is installed, we need to cd into app and then run npm run serve. Okay, so now our application is running on Localhost 8080. So I'm just going to copy it right here, and as you can see, this is our Vue application. Now, I'm just going to make an additional step which is optional and install bubblint. So this is a linter that we use in the company I work for. So I'm just going to install bubblint by using npm install eslint-config-bubblint. So this is just a configuration file for ESLint that we use at our company. I'm just kind of used to it, so that's why I'm using it right here, but you can skip this step altogether. So now in our code editor...

Optional: Configuring a Custom Linter

Instead of this vue/essential extends, we will use bubblint. And you can find this file in app/.eslintrc.js. So I'm just going to set this to be eslint-config-bubblint, and that's about it. So now PHPStorm is going to use that bubblint, and also when we save and the Webpack recompiles our files, it's going to watch our code and display any errors or warnings that are in our code according to this bubblint linter.

So now we are just going to run npm run serve again and see if everything works. And we get a compile error right here because we are using a semicolon here, and the bubblint doesn't support the usage of semicolons in our JavaScript code. So we have to fix that to let the application recompile. So now I'm just going to delete this semicolon from the main.js file right here. So delete that, save it, and now as you can see, the Webpack continued to compile our application. We have some warnings right here, but we are not going to look at them. The compilation will work just fine. These are just warnings on how you should write your code.

Cleaning Up the Boilerplate Project

So, let's check out our site if it works. Okay, so our site works. And as you can see, we have these links, Home and About. So we are currently on a homepage. If you click on About, this is our route. It works. So we have two pages or two routes, as you can see, About, and this is Home. So we are just going to delete all of this and just test out if we can connect to our API.

So I'm going to go to Home.vue. Let's set this to be a bit better. And we are not going to be importing this HelloWorld. So HelloWorld is the homepage. So I'm just going to delete that also. We don't need these components, and also we don't need a name. Actually, we need a name. Okay, so let's fix this. We don't need HelloWorld, so I'm just going to delete that. And we can also delete this logo right here.

So we have an empty homepage and we have an empty homepage, but we still have these links, Home and About, because our router still works, and it's actually in App.vue file. So as you can see, our menu is right here. Let me make this better. And okay, so I fixed the ESLint file, and now we can see this Home and About. Okay, so now we have our homepage, and in that homepage, we are going to test out if connection to our API works.

Connecting to the API with Axios

So first of all, I'm going to install... so I'm just going to open up a new tab in my console and go to... let me make this a bit smaller... and go to vuerentacar, cd app, and right here I'm going to npm install axios. So we are going to be using Axios to connect to our server, to our API server. We already did this in a couple of videos before, so this should be nothing new to you. Okay.

Now we can import right here. So import axios from 'axios'. Oh, come on. Okay, import axios from 'axios'. And then we are going to define a new method right here, mounted. And let's just, for example, create a console.log('Hello World') just to see if this works. And I of course misspelled Axios. Okay, now this is better. Save this, and we can check out if this works. So if I open up my console right here, I get this "Hello World." Let me just refresh this. Okay, so we don't get any errors, nothing like that.

Alright, let's get back right here, and in this mounted method, instead of using console.log, we are going to get the response from our API. So to do that, you would just do axios.get() and then you add a URL. In our case, it's going to be http://api.vuerentacar.localhost, and then we want to get the response, and we just want to console log that response out. Save this.

Fixing CORS Errors in October CMS

Now if we go to Chrome, you can see this. So failed to load, no 'Access-Control-Allow-Origin'. Now this is a problem with Vue; we don't have CORS installed. So we are going to have to go to October and install CORS right there and then see if our application works.

So I just noticed that this should actually be vehicles, but the problem is going to remain, it doesn't matter. So this is our vehicles route, but we still get this CORS problem. So we are going to go to October, go to Settings, Updates & Plugins, and install a new plugin called CORS. Okay, set this up. Now we go to CORS settings and add Allowed Origins. So we are going to set it to be asterisk, asterisk, or everything. So save this. And now we are going to set Allowed Methods, which is going to be GET, and maybe another one, POST, PUT, and DELETE. So we are going to be needing those methods throughout this series. And I'm just going to save this and let's check out our application now.

Verifying the Connection & Wrap-Up

So as you can see, we are getting the data from our server. If I click right here, let me make this bigger. So as you can see, we get this object, this data object. And to just see our data from the API, we can just do console.log(response.data). Okay, now as you can see, we get this. Let me refresh this page so we would get just this. And as you can see, this is vehicle one, this is vehicle two, and so on. So as you can see, we are getting the information from our API.

Now we are ready to actually start developing this application, and we are going to start doing that in the next episode. So remember, everything we did here will be available for you on GitHub. The link will be in the description below. And as always, thank you guys for watching, and I will see you in the next video.