Skip to content

Instantly share code, notes, and snippets.

View jellehak's full-sized avatar

Jelle Hak jellehak

9 followers · 21 following
View GitHub Profile
@jellehak
jellehak / README.md
Last active November 22, 2023 13:57
Router for Vue 3

Usage

<Route path='/login'>
  Login Page
</Route>

<Route path='/user/:id'>
  <template #default="props">
 User Page
@jellehak
jellehak / vue-created-methods.vue
Created May 18, 2021 09:32
vue-created-methods
<script>
export default {
methods: {
fetch() {
//...
}
}
}
export default {
@jellehak
jellehak / index.html
Last active April 14, 2021 10:15
App as library example
<!DOCTYPE html>
<html>
<head>
<title>TODO app</title>
</head>
<body>
<div id="app1">
loading...
@jellehak
jellehak / index.html
Created March 28, 2021 09:50
Bson viewer
<!DOCTYPE html>
<html>
<head>
<title>Javascript tool to convert BSON binary file into JSON</title>
<style>
html, body {
/* margin: 0; */
/* padding: 0; */
@jellehak
jellehak / index.html
Created March 27, 2021 11:20
Swagger CDN
<!DOCTYPE html>
<html>
<head>
<title>Docs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swagger-ui.css">
</head>
<body>
<div id="ui-wrapper-new" data-spec="{{spec}}">
@jellehak
jellehak / .eslintrc.js
Last active March 24, 2021 07:42
Light version of eslint-plugin-standard. (Can be used without any dependencies)
module.exports = {
env: {
browser: true,
node: true
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
rules: {
@jellehak
jellehak / usePersist.js
Last active November 10, 2020 10:19
Simple persistant state in you Vue app
export const get = (name = '') => {
const storage = localStorage.getItem(name)
const resp = JSON.parse(storage)
return Array.isArray(resp) ? resp : []
}
export const save = (name = '', obj) => {
localStorage.setItem(name, JSON.stringify(obj))
}
@jellehak
jellehak / hello-vue.html
Created July 28, 2020 11:14
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>Hello World!</h1>
</div>
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
@jellehak
jellehak / hello-react.html
Created July 28, 2020 10:27
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<div id="app"></div>
<script type="text/babel">
@jellehak
jellehak / README.md
Last active February 12, 2021 09:36
Automatic routes for Vue

Automatic routes for Vue

One thing I quite like from the Nuxt framework is the automatic routing capabilities. After a quick look on the web I came across https://github.com/ktsn/vue-auto-routing and a great tutorial from Michal https://codeburst.io/automatic-routing-in-vue-js-applications-1403ba425bfa. I tried to implement this plugin but it felt it could be done even more simple with the use of require.context. 

How it works

It turns this folder structure:

pages
|- dashboard
|- photos
|- users