How to solve ‘ReferenceError: window is not defined’ when importing Vue plugin in Nuxt.JS

NuxtJS

I need to use Vue plugin named vue-flash-message in Nuxt.JS. I installed it via NPM and created file vue-flash-message.js in folder plugins.

import Vue from 'vue';
import VueFlashMessage from 'vue-flash-message';

Vue.use(VueFlashMessage);

Then I tried to run `npm run dev` to test whether the plugin works. But it doesn’t work.

The reason is the default mode of Nuxt is SSR. The variable window is only available in the browser, not on the server.

And I found the solution, I just change the file content like below:

import Vue from 'vue';

if (process.browser) {
window.onNuxtReady(() => {
const VueFlashMessage = require('vue-flash-message');
Vue.use(VueFlashMessage);
})
}

After that, it should work fine. You also apply the idea for other Vue plugins.

Vue.js 2 Cookbook

VueJS 2 Cookbook Cover

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application.

From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples.

After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB.

This book will provide you with the best practices as determined by the Vue.js community.

Download link for ebook: http://bit.ly/2M3I47K.

Please send a request and I will share it with you with sample code files (~300MB zipped)

How to use jQuery in NuxtJS

NuxtJS

Today, I will guide you how to use jquery with NuxtJS project.

  1. npm install --save jquery.
  2. Open nuxt.config.js and add:

That’s all! Hope this helpful for you!

JQuery tips for HTML select

JQuery Logo

I am working on the next version of Bible for WordPress plugin, and I learned some tips while playing with HTML select.

I hope this helpful!

Sự khác nhau giữa ‘let’ và ‘var’ trong Javascript

Javascript

letvar đều là hai từ khóa được sử dụng để khai báo biến trong Javascript.

Tuy nhiên điểm khác biệt của chúng là phạm vi ảnh hưởng của biến được khai báo bởi hai từ khóa này khác nhau:

var có ảnh hưởng đến toàn bộ function chứa nó trong khi let chỉ có ảnh hưởng đến khối lệnh chứa nó, khối lệnh này có thể nhỏ hơn khối lệnh của một function, vì một function có thể chứa nhiều khối lệnh trong đó.

– Biến được khai báo với từ khóa let không thể truy cập trước khi biến đó được khai báo trong khối lệnh chứa nó. Nếu bạn cố gắng truy cập vào biến này thì một ngoại lệ ReferenceError sẽ được quăng ra.

– Nếu như cả hai biến được khai báo bằng letvar không nằm trong bất kỳ khối lệnh nào thì lúc này chúng là những biến toàn cục. Tuy nhiên, biến được khai báo bằng let sẽ không được thêm vào như một thuộc tính của đối tượng toàn cục windows như biến được khai báo bằng var. Ví dụ:

let me = 'go'; // globally scoped
var i = 'able'; // globally scoped
console.log(window.me); // undefined
console.log(window.i); // 'able'

– Nếu như bạn sử dụng strict mode, var cho phép bạn khai báo lại một biến bạn đã khai báo trước đó trong khi let thì không. Ví dụ:

'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, `me` is replaced.

Demo: http://jsfiddle.net/tcCp5/182/
Nguồn: http://stackoverflow.com/a/11444416

{Javascript} Chuyển đổi từ kiểu String sang kiểu boolean

Javascript

Tình hình là hôm nay đọc bài này trên blog của một tác giả nước ngoài thấy hay nên mình quyết định dịch và đăng lại. Nguồn bài viết được để ở cuối bài. Mình chỉ dịch những phần mình thấy quan trọng nên nếu bạn nào muốn có thể coi bài gốc nhé.

Chắc hẳn khi đọc tiêu đề bài viết thì có thể trong đầu một vài bạn đã xuất hiện một vài giải pháp. Tuy nhiên, nếu muốn biết đó có phải giải pháp mà mình sắp đề cập đến thì chắc chắn bạn phải theo dõi hết bài viết.

Có một vài cách để chuyển đổi từ kiểu String sang kiểu boolean trong Javascript. Tuy nhiên, bạn phải viết code thật cẩn thận, nếu không, bạn sẽ có thể gặp những lỗi rất khó chịu. Vì vậy, mục tiêu của bài viết này đó là đem đến cho bạn một giải pháp.
1. Có thể giải pháp đầu tiên bạn nghĩ ra là thế này: if(string) ...
Trong một số trường hợp, nó sẽ làm việc, nhưng không phải tất cả. Hãy theo dõi ví dụ dưới đây:

Vấn đề của đoạn code này là nó chỉ đúng khi biến string tồn tại.

2. Giải pháp số 2: Tạo đối tượng kiểu boolean từ một String?

Hãy xem tiếp ví dụ sau

Giải pháp này cũng không dùng được. Lý do ở đây rất đơn giản, vì hàm Boolean(String s) không cố gắng kiểm tra xem giá trị chuỗi input là “true” hay “false” mà nó kiểm tra xem chuỗi input có phải là giá trị non-false hay không (vd: false–0, undefined, an empty string, null,…). Vậy nên cho dù chuỗi string có giá trị là “true” hay “false” thì chắc chắn nó cũng không phải chuỗi rỗng nên điều kiện Boolean(string) luôn cho kết quả là true.

3. Giải pháp là đây: Chỉ đơn giản là so sánh chuỗi với “true”

Rất đơn giản phải không các bạn, tuy nhiên, mọi thứ vẫn chưa kết thúc, chúng ta sẽ viết gọn hơn nữa.

Đến đây thì vấn đề đã được giải quyết xong.

Nguồn: http://heyjavascript.com/javascript-string-to-boolean/

%d bloggers like this: