├── README.md
├── index.html
└── script.js
/README.md:
--------------------------------------------------------------------------------
1 | # tiny vue 3 template
2 |
3 | Every time I start a Vue project, I get confused and waste 15 minutes reading
4 | the documentation and remembering how to set up Vue.
5 |
6 | So this is a tiny template I made for myself so that I can avoid that next
7 | time. I don't use a build process, instead it uses the CDN version of Vue and a single HTML / JS file.
8 |
9 | I make no claims that this is the "best" way to do it, what the [official (and
10 | very good) Vue documentation](https://vuejs.org/guide/quick-start.html#using-vue-from-cdn)
11 | suggests is probably better. This is just what I do.
12 |
13 | ### demo
14 |
15 | You can see a demo of [what this site looks like](https://jvns.github.io/vue3-tiny-template/) on GitHub pages. If it's working correctly, it should say "banana" and "banana!".
16 |
17 | ### usage
18 |
19 | Usually I'll download the latest version of Vue with `wget https://unpkg.com/vue@3/dist/vue.global.js` and use a version I host myself
20 | instead of relying on the CDN (in case the CDN stops working one day).
21 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | vue 3 template
10 |
11 |
12 |
13 |
{{ message }}
14 |
15 | {{ testMethod() }}
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const app = Vue.createApp({
2 | data() {
3 | return {
4 | message: "banana"
5 | }
6 | },
7 | methods: {
8 | testMethod() {
9 | return this.message + "!";
10 | }
11 | }
12 | })
13 | app.mount('#app')
14 |
--------------------------------------------------------------------------------