View MainNav.vue
<template>
<div class="vh-100 nav-bar">
<nav role="main" class="w-100 tl">
<ul class="center pv5 ph5">
<li class="db v-mid mb3 text-gray">My Folders</li>
<li class="db v-mid mb3 text-gray">Shared with me</li>
<li class="db v-mid mb3 text-gray">From Canvas8</li>
<li class="db v-mid mb3 text-gray">Sent</li>
<li class="db v-mid mb3 text-gray">Archive</li>
View gist:499d398e92973200df903a23c5f6eda6
View webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
View raw.js
{% raw %}
<script type="text/html" id="hit-template-inner">
<span class="hit bg Grid-fill product--hover db" style="background-image:url({{frontImage}});">
<div class="block db">
<div class="absolute top-1 left-1 share-hover link z-2">
<svg class="share-icon absolute" width="19" height="18">
<use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"></use>
</svg>
<ul class="ma0 pa0 mb4 list share-list relative">
View README.md

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
View jquery-device-detect
//touch/mobile detection
if (
navigator.userAgent.match(/Phone/i) ||
navigator.userAgent.match(/DROID/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/) ||
navigator.userAgent.match(/Windows Phone/i) ||
View index.js
'use strict';
function findUpTag(el, tag) {
while (el.parentNode) {
el = el.parentNode;
if (el.tagName === tag)
return el;
}
return null;
}
View index.js
const ListComp = {
template: `
<div class="wrapper grid" id="start-parralex">
<div class="grid__item large--one-third medium--one-whole no-padding" v-for="(key, index) in productsOrderBy">
<swiper :options="swiperOption">
<swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
View index.js
const store = new Vuex.Store({
state: {
products: [
],
posts: []
},
mutations: {
addProducts (state, product) {
// mutate state
state.products.push(product)
View console.log
[Vue warn]: Property or method "products" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in root instance)
warn @ vue.min.js?2584471148241169295:525
warnNonPresent @ vue.min.js?2584471148241169295:1443
has @ vue.min.js?2584471148241169295:1475
(anonymous) @ VM4692:2
Vue._render @ vue.min.js?2584471148241169295:2220
updateComponent @ vue.min.js?2584471148241169295:2613
get @ vue.min.js?2584471148241169295:2936
run @ vue.min.js?2584471148241169295:3005