Skip to content

Instantly share code, notes, and snippets.

Avatar

Jeffrey Way JeffreyWay

View GitHub Profile
@JeffreyWay
JeffreyWay / HomeView.vue
Last active Jun 15, 2022
Learn Vue 3: Step By Step, Episode 21 - "Refactor to defineProps and defineEmits" - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/21
View HomeView.vue
<script setup>
import TabbableTextarea from "@/components/TabbableTextarea.vue";
import { ref } from "vue";
let comment = ref('initial textarea value');
</script>
<template>
<main>
<form>
View demo.vue
<script setup>
import { useStorage } from "@/composables/useStorage";
let food = useStorage('food', 'tacos');
</script>
<template>
<main>
<p>
What is your favorite food? <input type="text" v-model="food">
View AssignmentList.js
import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";
import Panel from "./Panel.js";
export default {
components: { Assignment, AssignmentTags, Panel },
template: `
<Panel v-show="assignments.length" class="w-60">
<div class="flex justify-between items-start">
@JeffreyWay
JeffreyWay / AssignmentList.js
Last active May 16, 2022
Learn Vue 3: Step By Step, Episode 14, More Flexible Components With Slots and Flags - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/14
View AssignmentList.js
import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";
export default {
components: { Assignment, AssignmentTags },
template: `
<section v-show="assignments.length" class="w-60">
<div class="flex justify-between items-start">
<h2 class="font-bold mb-2">
@JeffreyWay
JeffreyWay / Assignments.js
Last active May 13, 2022
Learn Vue 3: Step By Step, Episode 13 - Lifecycle Hooks, Fake APIs, and AJAX - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/13
View Assignments.js
import AssignmentList from "./AssignmentList.js";
import AssignmentCreate from "./AssignmentCreate.js";
export default {
components: { AssignmentList, AssignmentCreate },
template: `
<section class="space-y-6">
<assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
<assignment-list :assignments="filters.completed" title="Completed"></assignment-list>
@JeffreyWay
JeffreyWay / AssignmentList.js
Last active May 12, 2022
Learn Vue 3: Step By Step, Episode 12 - A Deeper Look at V-Model - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/12
View AssignmentList.js
import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";
export default {
components: { Assignment, AssignmentTags },
template: `
<section v-show="assignments.length">
<h2 class="font-bold mb-2">
{{ title }}
View index.php
<?php
class Player {
public function __construct(public string $name, public int $pennies)
{
//
}
public function givePenny(Player $p2): void
{
View AssignmentList.js
import Assignment from "./Assignment.js";
export default {
components: { Assignment },
template: `
<section v-show="assignments.length">
<h2 class="font-bold mb-2">
{{ title }}
<span>({{ assignments.length }})</span>
@JeffreyWay
JeffreyWay / App.js
Last active Jun 14, 2022
Learn Vue 3: Step by Step, Episode 9, Parent-Child State Communication - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/9
View App.js
import Assignments from "./Assignments.js";
export default {
components: { Assignments },
template: `
<assignments></assignments>
`,
}
@JeffreyWay
JeffreyWay / App.js
Last active May 4, 2022
Learn Vue 3: Step By Step, Episode 7, Bring it All Together - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/7
View App.js
import Assignments from "./Assignments.js";
export default {
components: { Assignments },
template: `
<assignments></assignments>
`,
}