Skip to content

Commit 56edca7

Browse files
scottrobertsonscottrobertson
authored
Merge pull request #14 from sduduzog/improve-composition
Improve composition
2 parents 85b131f + c153dda commit 56edca7

36 files changed

+12277
-83
lines changed

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎.eslintrc.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
parser: "@typescript-eslint/parser",
3+
extends: ["prettier"],
4+
plugins: ["@typescript-eslint", "prettier"],
5+
rules: {
6+
"prettier/prettier": ["error"],
7+
},
8+
};

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
examples

‎.prettierrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
trailingComma: "es5",
3+
arrowParens: "avoid",
4+
};

‎examples/vue2-demo/.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎examples/vue2-demo/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎examples/vue2-demo/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# vue2 + composition-api + Supabase
2+
3+
## Getting Started
4+
5+
- Run `yarn install` to pull all the required dependencies
6+
- Create a `.env` file on the root of this project i.e. `../vue3-vite-demo/.env`
7+
- Add the variable `VUE_APP_SUPABSE_URL` and set its value
8+
- Add the variable `VUE_APP_SUPABASE_KEY` and set its value
9+
- Run `yarn serve`
10+
11+
## How `yarn serve` works
12+
13+
The scripts starts by looking for and removing any tarballs on the root directory of this project. The next step, the root project _vue-supabase_ is packed into a tarball, the version is then removed from the name. The script then uses that tarball to install _vue-supabase_ as a dependency.

‎examples/vue2-demo/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎examples/vue2-demo/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "vue2-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"clean": "rimraf ./*.tgz",
7+
"pack-parent": "cd ../.. && npm pack --pack-destination=examples/vue2-demo",
8+
"rename-tarball": "rename *.tgz vue-supabase",
9+
"install-tarball": "yarn add ./vue-supabase.tgz",
10+
"serve": "yarn clean && yarn pack-parent && yarn rename-tarball && yarn install-tarball && vue-cli-service serve"
11+
},
12+
"dependencies": {
13+
"@vue/composition-api": "^1.2.4",
14+
"core-js": "^3.6.5",
15+
"vue": "^2.6.11",
16+
"vue-class-component": "^7.2.3",
17+
"vue-property-decorator": "^9.1.2",
18+
"vue-supabase": "./vue-supabase.tgz"
19+
},
20+
"devDependencies": {
21+
"@vue/cli-plugin-babel": "~4.5.0",
22+
"@vue/cli-plugin-typescript": "~4.5.0",
23+
"@vue/cli-service": "~4.5.0",
24+
"rename-cli": "^6.2.1",
25+
"rimraf": "^3.0.2",
26+
"typescript": "~4.1.5",
27+
"vue-template-compiler": "^2.6.11"
28+
}
29+
}

‎examples/vue2-demo/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/vue2-demo/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎examples/vue2-demo/src/App.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div id="app">
3+
<img alt="Vue logo" src="./assets/logo.png" />
4+
<HelloWorld msg="Welcome to Your Vue.js + TypeScript + Supabase App" />
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
import { Component, Vue } from "vue-property-decorator";
10+
import HelloWorld from "./components/HelloWorld.vue";
11+
12+
@Component({
13+
components: {
14+
HelloWorld,
15+
},
16+
})
17+
export default class App extends Vue {}
18+
</script>
19+
20+
<style>
21+
#app {
22+
font-family: Avenir, Helvetica, Arial, sans-serif;
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
text-align: center;
26+
color: #2c3e50;
27+
margin-top: 60px;
28+
}
29+
</style>

‎examples/vue2-demo/src/assets/logo.png

6.69 KB
Loading

‎examples/vue2-demo/src/components/HelloWorld.vue

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br />
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
8+
>vue-cli documentation</a
9+
>.
10+
</p>
11+
<h3>Installed CLI Plugins</h3>
12+
<ul>
13+
<li>
14+
<a
15+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
16+
target="_blank"
17+
rel="noopener"
18+
>babel</a
19+
>
20+
</li>
21+
<li>
22+
<a
23+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
24+
target="_blank"
25+
rel="noopener"
26+
>typescript</a
27+
>
28+
</li>
29+
</ul>
30+
<h3>Essential Links</h3>
31+
<ul>
32+
<li>
33+
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
34+
</li>
35+
<li>
36+
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
37+
>Forum</a
38+
>
39+
</li>
40+
<li>
41+
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
42+
>Community Chat</a
43+
>
44+
</li>
45+
<li>
46+
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
47+
>Twitter</a
48+
>
49+
</li>
50+
<li>
51+
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
52+
</li>
53+
</ul>
54+
<h3>Ecosystem</h3>
55+
<ul>
56+
<li>
57+
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
58+
>vue-router</a
59+
>
60+
</li>
61+
<li>
62+
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
63+
</li>
64+
<li>
65+
<a
66+
href="https://github.com/vuejs/vue-devtools#vue-devtools"
67+
target="_blank"
68+
rel="noopener"
69+
>vue-devtools</a
70+
>
71+
</li>
72+
<li>
73+
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
74+
>vue-loader</a
75+
>
76+
</li>
77+
<li>
78+
<a
79+
href="https://github.com/vuejs/awesome-vue"
80+
target="_blank"
81+
rel="noopener"
82+
>awesome-vue</a
83+
>
84+
</li>
85+
</ul>
86+
</div>
87+
</template>
88+
89+
<script lang="ts">
90+
import { Component, Prop, Vue } from "vue-property-decorator";
91+
92+
@Component
93+
export default class HelloWorld extends Vue {
94+
@Prop() private msg!: string;
95+
96+
mounted() {
97+
console.log("mounted with supabase: ", !!this.$supabase);
98+
}
99+
}
100+
</script>
101+
102+
<!-- Add "scoped" attribute to limit CSS to this component only -->
103+
<style scoped>
104+
h3 {
105+
margin: 40px 0 0;
106+
}
107+
ul {
108+
list-style-type: none;
109+
padding: 0;
110+
}
111+
li {
112+
display: inline-block;
113+
margin: 0 10px;
114+
}
115+
a {
116+
color: #42b983;
117+
}
118+
</style>

‎examples/vue2-demo/src/main.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import VueSupabase from "vue-supabase";
4+
5+
Vue.config.productionTip = false;
6+
Vue.use(VueSupabase, {
7+
supabaseUrl: process.env.VUE_APP_SUPABASE_URL,
8+
supabaseKey: process.env.VUE_APP_SUPABASE_KEY,
9+
});
10+
11+
new Vue({
12+
render: h => h(App),
13+
}).$mount("#app");

‎examples/vue2-demo/src/shims-tsx.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue, { VNode } from 'vue'
2+
3+
declare global {
4+
namespace JSX {
5+
// tslint:disable no-empty-interface
6+
interface Element extends VNode {}
7+
// tslint:disable no-empty-interface
8+
interface ElementClass extends Vue {}
9+
interface IntrinsicElements {
10+
[elem: string]: any
11+
}
12+
}
13+
}

‎examples/vue2-demo/src/shims-vue.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.vue" {
2+
import Vue from "vue";
3+
export default Vue;
4+
}

‎examples/vue2-demo/tsconfig.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"strict": true,
6+
"jsx": "preserve",
7+
"importHelpers": true,
8+
"moduleResolution": "node",
9+
"experimentalDecorators": true,
10+
"skipLibCheck": true,
11+
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
13+
"sourceMap": true,
14+
"baseUrl": ".",
15+
"types": [
16+
"webpack-env"
17+
],
18+
"paths": {
19+
"@/*": [
20+
"src/*"
21+
]
22+
},
23+
"lib": [
24+
"esnext",
25+
"dom",
26+
"dom.iterable",
27+
"scripthost"
28+
]
29+
},
30+
"include": [
31+
"src/**/*.ts",
32+
"src/**/*.tsx",
33+
"src/**/*.vue",
34+
"tests/**/*.ts",
35+
"tests/**/*.tsx"
36+
],
37+
"exclude": [
38+
"node_modules"
39+
]
40+
}

0 commit comments

Comments
 (0)