1. Chat NodeJS + VueJS
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Form Register using Nodejs + Vuejs
  4. Create QR Code in VueJS
  5. Create Template Vuejs and Laravel 5.4
  6. Deploying Vuejs to Heroku
  7. Hướng dẫn kết hợp Nodejs + Vuejs
  8. Read Data From File Using FileReader API in Vuejs
  9. Passing data from Laravel to Vue
  10. Multiple Subcategories in Laravel 5.8 + Vue
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. Transition in VueJS
  14. Sử dụng Routes trong Vuejs
  15. Sử dụng Props trong Vuejs
  16. Sử dụng Axios Get API trong Vuejs
  17. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  18. Shopping list using Vuejs
  19. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  20. Video Create Form Register and Login + Chat Real Time Using Nodejs + Vuejs
  21. Using v-for in VueJS
  22. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs

Create QR Code in VueJS

min read

Xin chào mọi người này mình chia sẻ hướng dẫn với mọi người cách tạo QRcode trong Vuejs nhé cũng đơn giản hà giờ mình làm thôi nào!
Ở đây mình đã chạy câu lệnh cài đặt vue-cli rồi nên mình không chạy lại, các bạn nào chưa thì chạy lại nhé, các bạn có thể xem lại bài viết:READ DATA FROM FILE USING FILEREADER API IN VUEJS

Để sử dụng được QR code trong VueJS, chúng ta cần phải cài đặt bộ thư viện của nó về nhé

// Using NPM
npm install vue-qrcode-component

//register component

import Vue from 'vue'
import VueQRCodeComponent from 'vue-qrcode-component'
Vue.component('qr-code', VueQRCodeComponent

Sau khi đã cài đặt thư viện và đăng ký component xong chúng ta có thể dùng vue-qrcode như sau:

<qr-code 
    text="https://goo.gl/9eIWP9"
    size="500"
    color="#f1c40f"
    bg-color="#3498db" 
    error-level="L">
</qr-code>

Các bạn xem những thông tin mà nó cho phép chúng ta thực hiện khi hiện QRcode như sau:

Sau khi các bạn cài đặt xong các bạn có thể chạy câu lệnh: npm run dev ( nhớ là các bạn phải tải project vue-cli để sử dụng nhé) mới chạy câu lệnh này được!

Hình demo:

Chúc các bạn làm thành công nhé! các bạn có thể xem video để làm theo trong video mình có làm từng bước một! Hẹn gặp lại mọi người với bài chia sẻ sau!

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)