Posts

Full stack with Vue.js & Laravel (p3) – Set up project

/0 Comments/in , /by

In the last post, I introduced the concepts of Vue.js. Today, we start to code and set up a project. First, we create a root folder named “vblog”.

1. Backend

We use Laravel (here I use the latest version is 5.7)

In the root folder, run command to create a project with “server” is the project name:

Laravel new server (noted: you have to install the Laravel installer first, the document here )

Now we have the folder structure below:

 

Then in Laravel project, we install some new packages to support API:

Run command: composer require barryvdh/laravel-cors

 

That’s enough for the server now, we will use it later

Now we go to set up the frontend (Vue.js) using Nuxt framework

2. Frontend

In the vblog folder, we create a Nuxt project named “web-app” using yarn

 

While creating, it will ask you some questions.

Here I choose below answers:

  • Project name: web-app
  • Project description: blog using Nuxt.js
  • Use a custom server framework: none (because we use Laravel as the server)
  • Use a custom UI framework: bootstrap (because it’s popular, easy to use)
  • Choose rendering mode: Single Page App
  • Use axios module: yes (we will use axios to call API)
  • Use eslint: yes
  • Use prettier: no
  • Author name: Huy Hoang 
  • Choose a package manager: yarn

Now we have the code folder structure like this:

 

Then in Nuxt project, we install some packages: jquery, node-sass, sass-loader, vue-notification, @nuxtjs/dotenv

Noted: jquery is not suggested using in Vue. But some package required it, so we still need to install jquery. But we will not use jquery in our code.

Now we try to run the project in a web browser.

Start server by running the command: yarn run dev then open URL http://localhost:3000/  in Chrome

We’ve finished setting up the project with Laravel as backend and Nuxt.js as frontend.

In the next post, we will build our web layout and custom the loading effect automation whenever URL router change, and add custom notification. Stay tuned!

Huy Hoang                  

Full stack with Laravel & Vue.js (p2) – Vue concepts

/1 Comment/in , /by

 

In the last post, I’d introduced what Vue is. We can get started with coding right now, but why I write this post, it’s also just theory?

Ok, ok, calm down. In this series, I want to discuss Laravel and Vue.js (we will use Nuxt – a Vue framework). So, before we start, we will research important concepts that we need to know.

Let’s get started!

  1. Template

By default, Vue will use an HTML file for its template. An included script will declare an instance of Vue and use the el property in the configuration object to tell Vue where in the template the app will be mounted. And we can bind data to our template by creating it as a data property and using the mustache syntax to print it in the page:

 

  1. Directives

Similar to Angular, we can add functionality to our templates by using directives. These are special properties we add to HTML tags starting with the v- prefix.

Example: We have an array of data. We can render this data to the page as sequential HTML elements by using the v-for directive:

  1. Components

Components extend basic HTML elements and allow you to create your own reusable custom elements. But probably the main reason to use components is that it makes it easier to architect a larger application. Functionality can be broken into reuseable, self-contained components.

Example: Here I’ve created a custom element, grocery-item, which renders as a li. The text child of that node is sourced from a custom HTML property, title, which is accessible from within the component code:

  1. Reactivity

A key feature of Vue’s design is its reactivity system. When you modify data, the view automatically updates to reflect that change.

Example: If we create a function that pushes another item to our array of grocery items after the page has already been rendered, the page will automatically re-render to reflect that change:

  1. Single-file component

A drawback of using components is that you need to write your template in a JavaScript string outside of your main HTML file. There are ways to write template definitions in your HTML file, but then you have an awkward separation between markup and logic. A convenient solution to this is single-file components. These files have the .vue extension and encapsulate the component template, JavaScript configuration, and style all in a single file. Web browser can’t read these files, so they need to be first processed by a build tool such as Webpack.

Example: I create a file named example.vue

  1. Vue Router

Vue Router allows you to map different states of your SPA to different URLs, giving you virtual pages. For example, twentyci.asia/ might be the front page of a blog and have a component hierarchy like this:

Whereas twentyci.asia/post/1 might be an individual post from the blog and look like this:

 

Changing from one page to the other doesn’t require a reload of the page, just swapping the middle component to reflect the state of the URL, which is exactly what Vue Router does.

 

  1. Vuex

Vuex provides a powerful way to manage the data of an application as the complexity of the UI increases, by centralizing the application’s data into a single store. We will talk more about Vuex during coding.

 

There are more concepts but we will talk about them while coding each part. In the next post, we will setup our base project and make some configurations. Thanks for reading. See you!

Huy Hoang