1. Download the plugin
$ npm i -S vue-textarea-autosize 

2. Create a vueTextareaAutosize.js file in the /plugins folder. Import your plugin then pass it into Vue.use()

import Vue from 'vue'
import VueTextareaAutosize from 'vue-textarea-autosize'
Vue.use(VueTextareaAutosize)

3. In nuxt.config.js, add ”~plugins/vueTextareaAutosize.js” to the plugins array.

plugins: [..."~plugins/vueTextareaAutosize.js"]

4. Rebuild your application

npm run dev

Unfortunately, you cannot customize the styling of the text in a <textarea>. Therefore, you need to use a <div contenteditable=”true” @input=”handleInput”>. When the user types inside the <div>, the handleInput method will be called which will store the text in the vuex store. This approach will allow the user to type into the <div>.

// store
export const state = () => ({
sampleText: ''
});
setCreatePostText(state,payload){
state.sampleText = payload
},
<!-- component/template -->
<div id="text-area-div" contenteditable="true" @input="handleInput">{{sampleText}}</div>
// methods
handleInput(e) {
this.$store.commit('setSampleText', e.target.innerText)
},
// computed
sampleText(){
return this.$store.state.networkModule.sampleText
}

However, if you rerender this text in a different…


I just had a eureka moment. Although this blog might be short, it can save you tremendous time. Have you ever been working on a component or page in Vue and then realize that you need to change the state of another component using a method from that component? Unless you are storing this data in Vuex and using Vuex mutations, these methods can be difficult to access without prop drilling (essentially moving the state to a common parent component/page then sending the props/methods down to each child component).

Let’s say you have component A and component B which have…


Nuxt uses automatic routing. Nuxt automatically transforms the “pages” folder into basic routes. Therefore, if you create index.vue in the “pages” folder, it will be your homepage. Any nested folders can be accessed through the url from the directory path. Imagine you have a “customers” folder inside of your “pages” folder. Inside of your “customers” folder, you have another “index.vue” file. If you navigate to http://localhost:3000/customers, you would see this page.

However, now, I want to redirect the user from the “/” to “/customers” (homepage to customers page). How could I do this? We will have to use some middleware…


Toasts are mini popups containing information. We can use these toasts for notifications. You can place them in various parts of your screen. Below is a super quick setup to begin implementing interactive toasts. Vue Bootstrap has a nice library to help us create these toasts. Learn more about toasts at: https://bootstrap-vue.org/docs/components/toast

  1. Install vue bootstrap
npm install vue bootstrap bootstrap-vue

2. Make can make a simple toast like this

this.$bvToast.toast('yourBodyText', {
title: 'yourTitleText',
toaster: 'b-toaster-bottom-right',
solid: true,
appendToast: true
})

3. If we want to make an interactive toast (for accessibility reasons, Vue Bootstrap does not recommend making toasts interactive)…


We are going to implement push notifications into our Nuxt application using Firebase. I’m going to assume that you know some basics of Vue and Nuxt. The push notifications will appear in the notifications drawer in the user’s operating system (outside of the browser). Therefore, we are going create a key that tells Firebase what type of operating system the user is using.

We are going to use a service worker to handle incoming messages from firebase. Nuxt has some nice documentation to set up Firebase. This guide will help you with any further questions.
https://firebase.nuxtjs.org/guide/getting-started

  1. Add dependencies
npm install…


When a user searches for your company name in Google, below the site title and description you will see links pointing to what Google believes are the most useful pages of our website. Sitelinks increase the amount of space your entry occupies in the search results and this means more visibility and higher CTR’s. Additionally, when sitelinks are shown for your brand name, users can directly go to your inner pages without having to visit your homepage. This provides users with a better experience and you get traffic to the pages that are more important for your business/website.

Although you…


We want to add microdata to our webpages so search engines understand what type of page we have. Schema.org is a community that helps us understand how to optimally structure our webpages. Start by reading: https://schema.org/docs/gs.html

  1. Identify a scope. In the example below, we are creating a webpage for a movie.
<div itemscope itemtype="http://schema.org/Movie">

2. You can add use the “itemprop” tag to add specifics to the movie. Set the value of this attribute to an appropriate property from the schema.org: https://www.schema.org/Thing. Per schema.org, “name,” “director,” “genre,” and “trailer” are keywords that tell Google your webpage is describing a movie. Note, you should find the appropriate type of webpage here: https://www.schema.org/docs/full.html.

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

3. Testing: Use the google’s rich snippets testing tool: https://search.google.com/test/rich-results


If you have forms on your website, you may encounter spam bots that submit forms. I have encountered this issue in my job. When a spam bot encounters a form, it will complete all input fields. Therefore, we can defeat the spam bots by creating an hidden input field then checking if this input field contains any characters.

  1. HTML: Setup a form with a hidden input
<form  action="yourController.php" method="post">
<input type='text'>
<input type='text' class="hidden">
</form>

2. CSS: hide input

.hidden{
display: none;
}

3. JavaScript: Check if the hidden form has no characters in it using jQuery

$('form').submit(function(){    
if($('.hidden').val().length === 0) {
// send form
}
});

There are many websites that use JavaScript and PHP. Why do you need both languages in a webpage? JavaScript is a client-side scripting language that executes within the browser. Therefore, you can use JavaScript to interact with the user and control the browser. On the other hand, JavaScript (excluding Node.js which is server-side JavaScript) code is not meant to interact databases. Enter PHP, you can use PHP inside of your HTML code to interact with a database (SQL, MySQL) or send emails. PHP is a server-side scripting language. You can pass data from your PHP code, i.e. …

Lance Watanabe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store