Torbjørn Nerbøvik tnerbovik

Deverus Vue.js Style Guide

Guide for developing Vue.js applications.

v. 0.0.1

Vue.js is an amazing framework, which can be as powerful as Angular or React, the two big heavy hitters in the world of front-end frameworks.

However, most of Vue's ease-of-use is due to the use of Observables - a pattern that triggers re-renders and other function calls with the reassignment of a variable.

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

	<?php

	// This can be found in the Symfony\Component\HttpFoundation\Response class

	const HTTP_CONTINUE = 100;
	const HTTP_SWITCHING_PROTOCOLS = 101;
	const HTTP_PROCESSING = 102; // RFC2518
	const HTTP_OK = 200;
	const HTTP_CREATED = 201;
	const HTTP_ACCEPTED = 202;

	# Added to the bottom of my file
	PROXY_OAUTH_CLIENT_ID=2
	PROXY_OAUTH_CLIENT_SECRET=SECRET-GENERATED-KEY-HERE
	PROXY_OAUTH_GRANT_TYPE=password

	<?php

	class StripeSubscriptionHandler {

	/**
	* Cancel a Stripe subscription, optionally prorating and refunding the unused amount
	*
	* @param string $id Stripe Subscription ID
	* @param bool $at_period_end Type of cancellation
	* If set to true, will cancel the subscription at its end

	import { AsyncStorage } from 'react-native'
	import { setGenericPassword, getGenericPassword, resetGenericPassword } from 'react-native-keychain'

	export default {
	async getAllKeys (callback) {
	try {
	const keys = await AsyncStorage.getAllKeys()
	if (callback) {
	callback(null, keys)
	}

	{% extends 'shop/_layouts/main' %}

	{% block main %}

	{{ sprig('product_content', {productId: product.id}) }}
	{{ sprig.script }}

	{% endblock %}