abhaywawale’s gists

abhaywawale / index.html

Last active October 17, 2018 14:20

HTML file when Server-side rendering used

	<!doctype html>
	<html data-n-head="">
	<head>
	<title data-n-head="true">nuxtify-spa</title><meta data-n-head="true" charset="utf-8"><meta data-n-head="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="true" data-hid="description" name="description" content="Nuxti project with SPA"><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons"><link rel="preload" href="/_nuxt/0c090eef8fed0b22748a.js" as="script"><link rel="preload" href="/_nuxt/23e2d858e6d12dd26548.js" as="script"><link rel="preload" href="/_nuxt/c74f371d36628cc38dd4.js" as="script"><link rel="preload" href="/_nuxt/d7f2b254f1766f74508f.js" as="script">
	</head>
	<body data-n-head="">
	<div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direc

abhaywawale / v-tabs-fix.vue

Last active December 5, 2021 17:06

This will fix the active tab issue

	<template>
	<v-container fluid>
	<v-layout align-start justify-center>
	<v-flex xs4 class="elevation-2 ma-2">
	<v-tabs v-model="model" color="cyan" dark slider-color="yellow">
	<draggable v-model="tabs" class="v-tabs__container" @update="tabUpdate">
	<v-tab v-for="(tab, index) in tabs" :key="index" :href="`#tab-${index}`">
	{{ tab.name }}
	</v-tab>
	</draggable>

abhaywawale / v-data-table-with-handle.vue

Created July 4, 2018 08:30

Where user can select the text and interact with the table

	<template>
	<v-container fluid>
	<v-layout align-start justify-center>
	<v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-2">
	<template slot="items" slot-scope="props">
	<td class="handle" style="max-width: 28px;">::</td>
	<td>{{ props.item.name }}</td>
	<td class="text-xs-right">{{ props.item.calories }}</td>
	<td class="text-xs-right">{{ props.item.fat }}</td>
	<td class="text-xs-right">{{ props.item.carbs }}</td>

abhaywawale / v-data-table-without-handle.vue

Last active July 4, 2018 08:16

	<template>
	<v-container fluid>
	<v-layout align-start justify-center>
	<v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
	<template slot="items" slot-scope="props">
	<td>{{ props.item.name }}</td>
	<td class="text-xs-right">{{ props.item.calories }}</td>
	<td class="text-xs-right">{{ props.item.fat }}</td>
	<td class="text-xs-right">{{ props.item.carbs }}</td>
	<td class="text-xs-right">{{ props.item.protein }}</td>

abhaywawale / v-data-table-without-handle.vue

Created July 4, 2018 08:13

v-data-table without handle which doesn't let user select the text

	<template>
	<v-container fluid>
	<v-layout align-start justify-center>
	<v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
	<template slot="items" slot-scope="props">
	<td>{{ props.item.name }}</td>
	<td class="text-xs-right">{{ props.item.calories }}</td>
	<td class="text-xs-right">{{ props.item.fat }}</td>
	<td class="text-xs-right">{{ props.item.carbs }}</td>
	<td class="text-xs-right">{{ props.item.protein }}</td>

abhaywawale / v-tabs-problem.vue

Created July 2, 2018 14:31

The v-tabs had a problem in showing corrent indicator after drag-n-drop

	<template>
	<v-container fluid>
	<v-layout align-start justify-center>
	<v-spacer></v-spacer>
	<v-flex xs4 class="elevation-1 pa-3 ma-2">
	<v-tabs v-model="active" color="cyan" dark slider-color="yellow">
	<draggable v-model="tabs" class="v-tabs__container">
	<v-tab v-for="tab in tabs" :key="tab.id" ripple>
	{{ tab.name }}
	</v-tab>

Abhay Wawale abhaywawale