Made withOctober CMSClip

Vue 2 and October CMS Todo App - Part 01 - Setup

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

15K viewsMay 8, 201713:35 runtime

Learn how to set up a modern development environment for building a to-do application using Vue.js 2 as the frontend and October CMS as the backend. This guide walks you through installing October CMS with Composer and SQLite, then scaffolding a new Vue 2 project using the Vue…

Chapters

#octobercms#clip#cmscrm

Project Overview

This video series focuses on building a full-stack to-do application. The frontend will be built with Vue.js 2 and the backend will be powered by October CMS.

Development Environment Setup

Setting up the complete development environment involves installing and configuring both the backend and frontend frameworks.

Backend: October CMS

October CMS is installed first to act as the data persistence layer.

Installation Method: Use Composer for a clean, command-line installation.
```
composer create-project october/october todo
```
Configuration: Run the interactive installer via Artisan.
```
php artisan october:install
```
Key Decisions:
- Database: SQLite is chosen for its simplicity and file-based nature, avoiding the need for a separate database server setup.
- Admin User: An admin user with the password password is created for backend access.

Note
The development site is initially accessed via an IP address (192.168.33.10/todo). The plan is to configure a more user-friendly virtual host like todo.dev in a future episode.

Frontend: Vue.js 2

The Vue.js project is set up inside the October CMS project directory for a unified codebase.

Tooling: The project uses Vue CLI and webpack for a modern, component-based workflow with .vue single-file components.
Prerequisites: A working installation of Node.js and npm is required.
Installation: Install the Vue CLI globally.
```
sudo npm install -g vue-cli
```
Project Scaffolding: From inside the todo directory, initialize a new Vue project.
```
vue init webpack view-todo
```

Important
During the CLI prompts, select the Runtime + Compiler build. This provides more flexibility than the runtime-only build.

Running the Dev Server:
1. Navigate into the newly created Vue project: cd view-todo.
2. Install dependencies: npm install.
3. Start the live-reloading development server: npm run dev. This typically runs on localhost:8080.

Project Structure

The Vue.js project (view-todo) is nested inside the main October CMS project (todo).
All frontend development will primarily happen within the view-todo/src/ directory.
Key Files:
- main.js: The entry point for the Vue application.
- App.vue: The root Vue component.
- components/: A directory for reusable child components.

Learning Resources

Vue.js Fundamentals: For beginners, the Learn Vue 2: Step By Step series on Laracasts is highly recommended.
Source Code: The complete source code for each episode is available on GitHub, organized by releases.

Introduction to the Vue 2 & October CMS Series

Hello, this is the one from watch-learn.com and it's time to start the new series. So we had, what, 38 videos for making websites worked with October CMS. I think that's enough for now. As I said in the previous episode, I'm going to go back to that series and probably cover some more topics about October. But today, we are going to start new series. I hope it's going to be around, I don't know, maybe 10 episodes. I don't think it is going to be more than that, but probably even less.

So what we are going to be doing is we're going to use October as our backend, so it's going to be the backend for our Vue.js application. And in this series, we are going to be using Vue 2, so the version 2 of Vue.js. You may already know that I already have similar series on this site. So I have this one-page app with Drupal 8 and Vue.js and also theming with WP REST API which also uses Vue, but they use Vue 1. So check out this series if you want to know more about Vue.js version 2.

Final Application Demo & GitHub Repository

So let me just get a few things out of the way before we begin this series and begin setting up our development environment. This is going to be the topic for this episode.

So first of all, this is what we are going to be building. So this is our to-do application. As I said, October is backend for it. I can finish these tasks, for this task, for example. As you can see, that task goes right here. I can maybe delete a task. I can edit a task and do something like 'test' right here. I can create a new task. Created. And if I refresh this page, as you can see, everything stays the same. So we are using October to persist the data that we are adding here, deleting, or editing.

Also, one more thing is I do this at the beginning of every series. I just want to remind you about the Git repository for this series. So you can go right here, so github.com, my username, october-vue-todo. And if you want to download the files for this episode, you will just go to releases or right here, so releases. And then you have this 'Vue 2 and October CMS To-Do App Part 1' and you can download the source code right here. So this is going to be made pretty much for every episode where we do some code changes.

Prerequisites and Recommended Learning Resources

Also, another thing—I'm going to go through this series well, not very fast, but I'm not going to explain some of the basics of Vue.js. If you want to know more about Vue.js, and I suggest that you definitely do this, you can go to view-casts or Laracasts. If I just write 'view cast' right here, it will take me to this page, and this is the Laracasts page for Vue.js. As you can see, you have a series of 30 episodes right here which will explain to you the basics of Vue and Vue.js 2.0.

So I think that's about it for this introduction. Let's set up our development environment right now.

Installing October CMS with Composer

Okay, so first of all, we are going to be installing October. If you don't want to follow my steps, you can check out this page for wizard installation. So this is the easiest way that you would install October on your system. What I'm going to use is going to be Composer, so I'm going to install October with Composer. And to do that, of course, you have to have Composer installed on your system. But as I said, if you want to do it the easy way, you can do it via this wizard installation. Just follow the steps on the October documentation installation page.

But for us, I'm going to do composer create-project... and it's going to be todo. I'm just going to call it todo and we just wait for a little bit. So when the installation finishes, we just go to the folder that October is installed. As you can see, these are the files. And now we have to run php artisan october:install, and it's going to ask us some questions. So first of all, the database type, I'm going to choose for this example is going to be SQLite, so we don't want to deal with MySQL. It's going to be a pretty easy October installation, actually, pretty lightweight. So we are just going to be using SQLite. Database path is this one. Okay.

The first name is going to be Admin, okay. Last name, Person, okay. Email, that's also okay. Admin login is going to be admin and password is going to be password. Is this information correct? Yes. Application URL, you can leave it as localhost. If you are using something like MAMP, XAMPP, whatever. I'm using a Vagrant box, but I'm just going to leave this to be localhost. It doesn't matter either way. Configure advanced options? No for now. And that's actually it.

Accessing the Local October CMS Site

Now it's installed October, and as I said, you can use localhost for this. So if you're using something like MAMP or XAMPP, I am using a Vagrant box. I have a Vagrant box, and if you don't know what that is, and you want to have the exact same setup as I have, you can check out the videos about Vagrant on my channel. I'm going to leave a link in the card somewhere.

So I'm actually going to access this site through 192.168.33.10/todo. So this is the October site. In the next episode, this is going to be changed to todo.dev because I don't want to write this address every time I want to access my site. And I'm going to do that via virtual host. So once again, I urge you to check out the Vagrant series if you don't know how to do that, and then we are going to have a nice address for our local development.

Setting Up the Vue.js Project with Vue CLI

So in the previous episodes when we were doing WordPress and Vue and Drupal and Vue, we just added a script tag to our HTML file and then we called Vue that way. In this series, we are going to install Vue, let's say, the right way. We are going to be using webpack, we are going to be using .vue files for our specific components, so everything is going to be component-based. And to do that, you have to install Vue CLI. So that's command line interface for Vue and to do that, you would just do sudo npm install -g vue-cli. I'm not going to do this because I already have it installed, but you should run this command. Of course, you have to have Node.js installed on your system. And I hope this is the way that it would work on Windows also, but if it doesn't, well, you know, Google it.

So take notice of one more thing. I'm still in my October folder, so I'm going to do the installation of Vue in my October folder so that we have everything in the same place. So to create a new Vue project, we are just going to run vue init webpack and then we are going to call this just view-todo. So this is going to be the folder that is going to be in our todo folder.

Configuring the New Vue Project

So we just click enter and wait for it to finish. Now it's asking us for the project name. I'm going to leave it as view-todo. The project description, you can add a description right here if you want. You can add an author. So the runtime plus compiler, we are going to choose this one. So we want to have a runtime and the compiler. Do you want to install Vue Router? We are not going to be installing it right now because we are not going to be needing it for this project. No. Do you want to use ESLint? No. Tests? No. No. But you can of course say yes to all of this if you want to test your code. And that's about it.

Now we should just follow these instructions right here. So we have to go to cd view-todo and then you run npm install to install all the dependencies that Vue is going to be needing.

Running the Dev Server & Exploring the Vue Project Structure

Now, once this is finished, you just run npm run dev. And now it's building our project and it should start the development server. And as you can see, it automatically brings me to my browser and this is our Vue application. So as you can see, it's on localhost:8080.

What we can do right here is let's open up a new tab. We are going to go to the todo folder, just so I can show you what that folder now consists of. So I'm just going to open up Sublime for that, open up my code editor. And as you can see, now we have todo, these are all the October files, and then in here we have view-todo. This is our Vue application. And most of the things that we are going to be doing is going to be in this src folder, which consists of main.js file, right? And then consists of App.vue file. So as you can see, it is calling the Hello component right here, and that component is in components/Hello. So if we check out that, you can see that we have this template right here. And if we check out our browser, this is that page. So we have this message that is actually returned right here. So you have a message, 'Welcome to your Vue.js App'. This is 'Welcome to your Vue.js App'. And then you have this 'Essential Links', 'Core Docs', 'Forum' and so on.

Conclusion and Next Steps

So this is the way you would set up this development environment for using Vue and October together. So now we are ready to develop our application, to start writing code for it. And that is going to happen in the future episodes.

As for now, remember, everything we did here will be available for you on GitHub. The link will be in the description below. If you want to ask me questions, you can do that on Facebook, Twitter, YouTube, Github, and so on. Also, if you like this video, maybe give a thumbs up. If you like the channel, maybe subscribe. If you want to send some love in my way, you can use the Patreon page for that.

So thank you guys for watching and I will see you in the next video.