mjgartendev

// Copied/simplified from https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/ 
// by https://www.smashingmagazine.com/author/lukas-van-driel
// 1. npm install firebase
// 2. insert this snippet in your Vuex root
import Vue from 'vue';
import firebase from 'firebase/app';
import 'firebase/firestore';

// Copy this from the cloud console "add to web app" settings
var config = {

mjgartendev

Google Firebase Hosting Steps

Install

Install Firebase tool globally

npm install -g firebase-tools

mjgartendev

Cacher Add Snipper CLI Commands

USAGE

cacher snippets:add [FILENAME]

OPTIONS

mjgartendev

<template>
  <div>

  </div>
</template>

<script>


export default {

mjgartendev

module.exports = {
  /*
  Headers of the page
    - Nuxt.js uses vue-meta to update the headers and html attributes of your application.
    - Nuxt.js configures vue-meta with these options:
      {
        keyName: 'head', // the component option name that vue-meta looks for meta info on.
        attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
        ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
        tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag

mjgartendev

<template>
    <div>
        <!-- nuxt-child
        For Nested Route Pages:
        This component is used for displaying the children components in a nested route.-->
        <div>
            <h1>I am the parent view</h1>
            <nuxt-child/>
        </div>

mjgartendev

<template>
<div>
    <!-- nuxt
        For Layouts:
        <nuxt> component is used only in layouts to display the page components. 
        Props:
            nuxtChildKey: string
                This prop will be set to <router-view/>, useful to make transitions inside a dynamic page and different route.
                Default: $route.fullPath
        Example (layouts/default.vue):-->

mjgartendev

<template>
    
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    
})
</script>

mjgartendev

Flexbox App Layout

Forked from Hugo Giraudel's Pen Demo Flexbox 1.

A Pen by Michael Garten on CodePen.

License.

mjgartendev

Flexbox Holy Grail Layout

Based on examples at https://philipwalton.github.io/solved-by-flexbox/

A Pen by Michael Garten on CodePen.

License.