Vue-GDocs

Vue component to embed Google Docs content.

Features:

• Works with any published Google Docs URL
• Fixes up padding / width of the original automatically
• Removes tracking beacons from URLs
• Makes all links open in a new tab by default

<script>
import VueGdocs from 'vue-gdocs';

export {
	components: {VueGdocs}
};
</script>

<template>
	<div>
		<vue-gdocs :url="https://docs.google.com/document/d/e/SOME-LONG-HASH/pub"/>
	</div>
</template>

Installation

Install via NPM:

npm install --save vue-gdocs

Import into your app:

<script>
import VueGdocs from 'vue-gdocs';

export {
	components: {VueGdocs}
};
</script>

Use in your template:

<template>
	<div>
		<vue-gdocs :url="https://docs.google.com/document/d/e/SOME-LONG-HASH/pub"/>
	</div>
</template>

API

Properties

The vue-gdocs component accepts the following properties:

Property	Type	Default	Description
url	String		The URL of the published Google Doc to display
urlOptions	Object	{}	Additional options to pass to fetch when retrieving the URL
follow	Boolean	false	Handle all document-to-document links by replacing the current document contents, if false link will act like a regular link
fixes	Array	See below	An array of fixes to apply, in order
customFixes	Object	{}	Additional user defined fixes, see notes below

Notes:

• Fixes defaults to all available fixes being enabled in a suitable execution order
• customFixes is a simple lookup object of functions to run. Each function is called as ($doc) (a jQuery wrapped version of the full document. Each function can return undefined (to carry on with processing on the top level document) or a jQuery object as a replacement body
• Following links only works if the link is a published document link - i.e. should end in /pub

Events

The following events are emitted from the component:

Event	Payload	Description
click-link	({url, event})	Emitted when a link is clicked within the document, use event.preventDefault() to prevent normal behaviour

Fixes

The following fixes ship with the component and are all enabled by default:

Fix	Description
bodyRoot	Add the gdoc-root class to the actual body root <div/> wrapper
bodyPadding	Remove main document padding
bodyWidth	Remove main document maximum-width restrictions
linkTargets	Make all <a/> links open in a new window
linkUnshorten	Remove Google shortner prefixes for all links