Skip to content

Instantly share code, notes, and snippets.

View simonjcarr's full-sized avatar

Simon Carr simonjcarr

13 followers · 12 following
  • Gravity Software
  • Preston, Lancashire
View GitHub Profile
@simonjcarr
simonjcarr / Header.vue
Created August 15, 2020 08:54
<template>
<div class="bg-black h-32 p-8 flex justify-around">
<div class="text-white text-4xl">Composition API Blog</div>
<div class="text-white text-xl"><router-link to="/">Home</router-link></div>
</div>
</template>
@simonjcarr
simonjcarr / index.js
Created August 15, 2020 08:49
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home
}
];
@simonjcarr
simonjcarr / App.vue
Created August 15, 2020 08:47
<template>
<div id="app">
<router-view />
</div>
</template>
@simonjcarr
simonjcarr / Home.vue
Created August 15, 2020 08:45
<template>
<div class="home"></div>
</template>
<script>
export default {
name: "Home"
};
</script>
@simonjcarr
simonjcarr / Post.vue
Created August 14, 2020 22:47
Post.vue with the composition API
<template>
<div>
<div class="text-4xl font-bold">{{ post.title }}</div>
<div>{{ post.body }}</div>
<div class="italic mt-4">
Author: <span class="text-red-500">{{ user.name }}</span>
</div>
</div>
</template>
@simonjcarr
simonjcarr / Post.vue
Created August 14, 2020 22:44
Post.vue without the Composition API
<template>
<div>
<div class="text-4xl font-bold">{{ post.title }}</div>
<div>{{ post.body }}</div>
<div class="italic mt-4">Author: <span class="text-red-500">{{ user.name }}</span></div>
</div>
</template>
<script>
export default {
@simonjcarr
simonjcarr / App.vue
Created August 11, 2020 19:26
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<teleport to="#outside_app">
<Count msg="Hello Vue 3.0 + Vite" />
</teleport>
</template>
<script>
import Count from './components/Count.vue'
@simonjcarr
simonjcarr / App.vue
Last active August 11, 2020 19:18
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<Count msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import Count from './components/Count.vue'
export default {
name: 'App',
components: {
Count
@simonjcarr
simonjcarr / index.html
Created August 11, 2020 19:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
@simonjcarr
simonjcarr / index.js
Created August 10, 2020 18:52
import Vue from "vue";
import Vuex from "vuex";
import Todo from './todo' //Import the todo module
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},