Giới thiệu Trong quá trình làm VueJS NuxtJS hay thậm chí là Laravel mình cũng hay áp dụng các pattern như Service hoặc Repository. Mình cũng đã trải nghiệm qua thằng Angular, và thực sự nó support các pattern này khá tốt và theo khuôn khổ. Với VueJS hay Nuxt thì các dev sẽ phải cần có kinh nghiệm và tự dựng bằng tay Bài viết này mình mong muốn chia sẻ về cách sử dụng Service pattern trong NuxtJS mình hay làm...
Happy New Year VueJS Design Pattern nuxt
1. NuxtJs là gì ? Là một framework của Vuejs được sử dụng để xây dựng những ứng dụng từ Vuejs. Cho phép tạo Universal Vue Apps. Có thể chạy trên server lẫn client. 2. Tính năng nổi bật Cấu trúc thư mục rõ ràng Server-Side Rendering (SSR): toàn bộ dữ liệu xử lý trên server, rồi từ server trả dữ liệu về client hiển thị. Client Side Rendering (CSR): phần lớn chủ yếu xử lý trên client. Viết code...
VueJS Vuex Vue Router
I. Giới thiệu Trong hướng dẫn này, mình sẽ trình bày cách thực hiện Đăng nhập Facebook trong Vue 3 với một ứng dụng mẫu cho phép bạn đăng nhập bằng Facebook và xem / cập nhật / xóa tài khoản đã đăng ký trong ứng dụng Vue dựa theo một bài viết của anh Jason. Lần đầu tiên bạn đăng nhập bằng Facebook, một tài khoản sẽ được đăng ký trong ứng dụng Vue bằng id Facebook của bạn để nó có...
VueJS Vue3
Là một tác phẩm của Evan You ra mắt cùng với Vue 3, Vite được sinh ra như là một sự thay thế cho Webpack. Bài viết này sẽ giới thiệu tới mọi người một combo mới với tốc độ build cực lý nhanh chóng và có thể sử dụng trong lâu dài. Khởi tạo project với Vite npm init @vitejs/app my-project hoặc yarn create @vitejs/app my-project Vite sẽ cung cấp các lựa chọn khi cài đặt như sau: ? Select a template: … ▸...
VueJS vite
1. Mở đầu Trong bài viết trước của serie về VueJS chúng ta đã cùng nhau tìm hiểu về props cũng như cách sử dụng nó. Còn ở bài viết này, chúng ta sẽ cùng nhau tìm hiểu về slot. 2. Slot a. Giới thiệu về slot Trong một ứng dụng VueJS, chắc hẳn bạn đã gặp một số trường hợp mà nhiều component của bạn có một số thành phần UI dùng chung. Để dễ hiểu nhất thì chúng ta xét ví dụ như sau: Giả...
VueJS May Fest slot
Trong bài viết này mình hướng đến đối tượng là các bạn newbie. Các bạn mới hoặc chưa có nhiều kinh nghiệm làm việc với Vue và các framework khác nói chung. Giới thiệu Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the...
VueJS vite May Fest Webpack cli
Trong lập trình web ngày nay, Javascript đang trở nên phổ biến và đóng vai trò hết sức quan trọng. Với sự phát triển của công nghệ, có rất nhiều framework cũng như ngôn ngữ lập trình khác xuất hiện và khó để nắm bắt được hết. Mỗi framework cũng như ngôn ngữ lập trình lại có những công dụng khác nhau, trong đó React.js và Vue.js là phổ biến nhất. Tìm hiểu về React.js React được facebook...
JavaScript ReactJS VueJS Developer Virtual Dom
I. Giới thiệu Như vậy ở phần trước mình đã giới thiệu phần khởi tạo app vue 3, phần fake backend cũng như phần auth cho app. Ở phần 3 này mình sẽ hướng dẫn tiếp phần tạo router, xây dựng các hàm cũng như hoàn thiện ứng dụng. II. Router Router xác định các tuyến đường cho ứng dụng Vue 3 và tạo một phiên bản Vue Router mới bằng hàm createRouter (). Router sẽ được nhập vào main.js nơi nó...
VueJS Vue3
1. Mở đầu Trong các bài viết trước, chúng ta đã cùng nhau tìm hiểu về Props và Slot là gì cũng như cách sử dụng nó trong project VueJS. Để nối tiếp cho series tìm hiểu về VueJS thì hôm nay mình sẽ giới thiệu với các bạn về khai niệm Mixin. 2. Mixin a. Giới thiệu Như các bạn đã biết, ứng dụng VueJS của chúng ta được cấu tạo từ rất nhiều các component khác nhau và việc chia thành các component...
VueJS May Fest mixin
Trong khi Vuejs là framework được xây dựng bởi Javascript được sử dụng cho client-side app. Nuxt.js là framework được phát triển dựa trên Vue.js. Có thể hình dung Nuxt là phiên bản được thiết lập sẵn để dễ dàng phát triển universal app hoặc spa. Do vậy core của Nuxt.js bao gồm Vue.js, Vue Router, VueX, Vue SSR và Vue Meta. Nuxt Schema/Lifecycle Như đã nói ở trên, Nuxt.js là framework được xây dựng từ Vue.js nên...
VueJS nuxt.js
Xin chào các bạn, việc ngày càng có nhiều web thiết kế UI sử dụng các thư viện, framework hỗ trợ việc tạo component thì cũng sẽ có rất nhiều cách để phân chia, thiết kế component khác nhau. Qua các dự án thực tế mình xin giới thiệu đến các bạn về một cách thiết kế component mà mình đã được làm việc qua là Atomic Design Như tiêu đề của bài viết, chúng ta sẽ kết hợp Atomic design và BEM...
CSS VueJS May Fest
Hề lô anh em , hôm nay mình sẽ chỉ cho anh em làm thế nào để tích hợp Google Map vào trogn project Vue của chúng ta nhé. Ứng dụng nhỏ này của chúng ta sẽ có thêm chức năng tìm kiếm đơn giản và đánh dấu vị trí trên bản đồ. Để thúc hiện việc này thì mình sử dụng package vue2-google-maps package Và đây là các bước mà chúng ta sắp làm : Bước 1: Cài đặt Vue Project Bước 2: Cài đặt Vue2 Google...
VueJS JS
1. Mở đầu Ở phần trước của bài viết, chúng ta đã cùng nhau tìm hiểu xem mixin là gì, nó giúp chúng ta giải quyết điều gì cũng như cách sử dụng nó trong project của chúng ta. Trong bài viết ngày hôm nay, mình sẽ chia sẽ tiếp tục chia sẻ đến các bạn những điều khác mà bạn cần biết về mixin để bạn có thể sử dụng nó trong project của mình hiệu quả hơn. Nào chúng ta cùng bắt đầu. 2....
VueJS mixin
1. Apollo https://github.com/nuxt-community/apollo-module Đây là một module của Nuxt để giúp bạn có thể sử dụng Graphql trong dự án Nuxt. Module này yêu cầu Vue 2.6+ và serverPrefetch support npm install --save [email protected] [email protected] [email protected] 2. Cài đặt Cài đặt nuxt yarn create nuxt-app nuxt-demo Cài đặt Apollo yarn add @nuxtjs/apollo Tạo file apollo-config.js trong folder plugins, file này sẽ bao gồm 3...
VueJS nuxt Apollo
I. Giới thiệu Thông thường khi debug trong ứng dụng Vuejs, chúng ta vẫn đang sử dụng console.log() để phát hiện lỗi và sửa. Tuy nhiên Vue có một plugin chuyên dụng để debug, giúp chúng ta tăng tốc độ phát triển đáng kể. Nó không có nhiệm vụ thay thế cho console.log(), nó chỉ bổ sung thêm cho chúng. Nó được gọi là Vue DevTools, và sau đây là 3 chức năng bạn có thể sử dụng nó để có thể tăng...
VueJS
Chào các bạn, trong thời gian vừa qua, mình có cơ hội được vọc vạch với 1 số framework mới, trong đó có Vuejs. Cho nên hôm nay, để có tổng hợp nhanh kiến thức của mình đã học được cũng như giúp 1 số bạn gặp khó khăn trong quá trình học Vuejs, mình sẽ làm hướng dẫn tạo 1 app Todo list đơn giản Trước khi bắt đầu bài viết, mình sẽ mặc định các bạn đã có 1 số kiến thức cơ bản về...
VueJS
1. Khởi tạo project Các bạn có thể cài đặt qua npx: npx create-nuxt-app <project-name> Hoặc có thể sử dụng yarn: yarn create nuxt-app <project-name> Trong quá trình cài đặt sẽ hiển thị một số thông tin như là: name project, programing language, package manager, ... sẽ hỗ trợ cho dự án của bạn nhanh và thuận tiện hơn trong quá trình làm. 2. Cài đặt i18n Cài đặt npm hoặc yarn : npm install...
VueJS I18n nuxt.js
Giới thiệu Xin chào các bạn, mình đã từng có một bài viết nói về CRUD với livewire tại đây rồi : https://b29.vn/bai-viet/laravel-crud-don-gian-voi-livewire?id=34, hôm nay mình sẽ hướng dẫn các bạn làm một project nhỏ về CRUD với Vue Js. Chúng ta sẽ sử dụng : Laravel 8 cho phần build API và build source FE tích hợp vào Laravel Tailwind Css để làm giao diện trong đẹp hơn. Thì lí do mình chọn thằng này vì mình...
Laravel VueJS Vue3 Composition API Laravel CRUD
Trường hợp lỗi hiển thị Ví dụ khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Như chúng ta đã biết, props trong Vuejs là phương pháp truyền dữ liệu trực tiếp từ component cha xuống component con một cách nhanh chóng và hiệu quả. Thông thường, chúng ta hay sử dụng props để truyền dữ liệu dạng string, object, array, number, boolean… mà ít khi để ý rằng props cũng có thể truyền một hàm logic. Sử dụng props truyền logic có nhiều lợi ích trong việc phát triển code như việc tăng khả...
Front-end JavaScript frontend VueJS HTML5