Skip to content

Instantly share code, notes, and snippets.

@ansemjo

ansemjo/singlevue.html

Created January 29, 2021 15:56
Show Gist options
  • Save ansemjo/f4244748e299c83f87071690303cf76c to your computer and use it in GitHub Desktop.
Save ansemjo/f4244748e299c83f87071690303cf76c to your computer and use it in GitHub Desktop.
Download ZIP
an absolutely minimal vue app example with everything in one file (except for vue itself)
Raw
singlevue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>SingleVue</title>
</head>
<body>
<noscript>
This project requires JavaScript.
</noscript>
<center>
<div id="app"></div>
</center>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!--<script src="/vue.min.js"></script>-->
<script>
// check url fragment for name
let name = window.location.hash.substr(1) || undefined;
// simple component with prop and slot
const Link = {
name: "Link",
props: ['url'],
template: '<span>Link: <a :href="url">[<slot></slot>]</a></span>',
};
// main app component
const app = new Vue({
el: '#app',
name: "SingleVue",
components: { Link },
data: () => ({
hi: `Hello, ${name || 'World'}!`,
link: "https://vuejs.org/",
}),
template: `
<span>
<h1>{{ hi }}</h1>
<br/>
<Link :url="link">home</Link>
</span>
`,
});
</script>
</html>
@ansemjo
Copy link
Author

ansemjo commented Feb 3, 2021

Kind of related: use a single web-component in a page.

<!-- file: boxed.vue -->
<template>
  <span class="boxed">
    Link: <a :href="url">[<slot></slot>]</a>
  </span>
</template>

<script>
export default {
  name: "boxed",
  props: [ "url" ],
}
</script>

<style scoped>
  .boxed {
    border: 1px solid black;
  }
</style>

Compile to a web component with: vue-cli-service build --target wc --name my-boxed boxed.vue and use in the generated demo.html as:

<meta charset="utf-8">
<title>my-boxed demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./my-boxed.js"></script>
<my-boxed url="https://gist.github.com/"> gists </my-boxed>

The minified built web-component for this example clocks in at 8.7KB. This is a lot considering the original Vue component is only 245 Bytes but for medium-complexity components this might very well be adequate and certainly simplifies writing repetitive HTML pages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment