Here is a simple set up to display a google maps street view in Vue/Nuxt. We create a new google maps instance and pass in the HTML element where we want to attach the google map. We also specify the lat/lng where we want the map to display.

<template>
<div id="open-house-wrapper"></div>
</template>
<script>
export default {
mounted(){
new google.maps.StreetViewPanorama(
document.getElementById("open-house-wrapper"),
{
position: { lat: 42.345573, lng: -71.098326 },
pov: {
heading: 0,
pitch: 0,
},
}
);
}
}
</script>
<style lang="scss" scoped>
#open-house-wrapper{
width: 100%;
height: 100%;
}
</style>

A deep link is a link that sends users directly to a specific place in your web or mobile app. Let’s say we are promoting a specific product. We can provide a link directly to the product instead of having the user go to your app and find the product.

Let’s say your company has a website, iphone app, and android app. If the user is on his iphone and he clicks on a deep link from an email, we want the user to be routed to the iphone app. If the user does not already have the app installed…


Let’s get started…

  1. Install sass-loader and node-sass
npm install --save-dev node-sass sass-loader

2. Install the style-resources plugin

npm install --save-dev @nuxtjs/style-resources

3. In the assets folder, create a new directory called “scss.” Inside of this new directory, create a file called “colors.scss.” In colors.scss, add the following:

$color-variable: #4EA5D9;

4. Add the following to nuxt.config.js. Make sure you retain the order below: css => modules => styleResources otherwise the the modules may not load correctly.

export default {
//...
css: [
'~assets/scss/colors.scss'
],
//...
modules: [
'@nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/*.scss']
},
//...
}

5. Now, in your component add the bolded part to the <style> tag of your template. Now, you can use your variable to set the background-color.

<style lang="scss" scoped>
div {
background-color: $color-variable;
}
</style>

CodeIgniter is a PHP framework for webpages. PHP uses a Model, View, Controller (MVC) approach. When a user lands on the webpage’s URL, Codeigniter will route the request to a Controller. The Controller will load the necessary data and appropriate View (HTML). The controller may make API calls or make database queries (SQL) using functions defined in the Model.

Out of the box, in the app folder, the main folders you will work with are: /config, /controllers, /models, and /views.

Running your app: Download a web server, such as Xampp (https://www.apachefriends.org/download.html), to run your application on your local computer. …


  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…

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