appwrite / demo-todo-with-vue Goto Github PK
View Code? Open in Web Editor NEWA basic demo example for integrating between Appwrite & Vue JS ๐
Home Page: https://appwrite-todo-with-vue.vercel.app
License: MIT License
A basic demo example for integrating between Appwrite & Vue JS ๐
Home Page: https://appwrite-todo-with-vue.vercel.app
License: MIT License
Just create a new account in Signup
Signing up should go through with new credentials
Getting error:
Different version (specify in environment)
Linux
This is the demo app
I would like to report issue with user's todo's separation. I've deployed app on my localhost, creaded DB and collection. Registered two users and logged them in. Both users are sharing one Todo list and they do not have their own.
Not sure if this is a bug or feature :) I would expect separation in Todos per user.
I am using latest version of Appwrite.
I'm trying to install this app example locally, and I can't get it running. Note that I have limited knowledge of docker, Vue, or appwrite. At first, my todo items weren't saved, Firefox' console said "User id is null/empty". I figured that was because I was unable to login/signup, because the screen redirected immediately to the prompt for entering todo-items, which I was able to mitigate by editing App.vue with this:
watch: {
getAccount(newValue, oldValue) {
console.log("In Watch getAccount in App.vue")
if (newValue === null) {
this.$router.replace('/')
} else {
this.$router.replace('/login')
}
}
But now I'm stuck trying to sign up with my local instance, see this output of Firefox' javascript console:
signing up ... [redacted] SignUp.vue:64:15
XHROPTIONShttps://localhost/account
[HTTP/2 204 No Content 6ms]
XHRPOSThttps://localhost/account
CORS Missing Allow Origin
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost/account. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Error creating Account account.js:15:15
XHRGEThttp://localhost:3000/__vite_ping
My guess is that I need to do one of these:
tldr: This guide (or the app itself) does not work as-is.
GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them ๐คฏ.
Appwrite currently uses the older issue template format. Your task is to create GitHub issue forms for this repository. Please use Appwrite's issue templates as a reference for this PR.
.github/ISSUE_TEMPLATE/bug.yaml
.github/ISSUE_TEMPLATE/documentation.yaml
.github/ISSUE_TEMPLATE/feature.yaml
If you need any help, reach out to us on our Discord server.
Are you ready to work on this issue? ๐ค Let us know, and we will assign it to you ๐
Happy Appwriting!
Refresh the page after login
Stay logged in
I need to log in again
And I caught possible related errors
TypeError: Cannot read properties of undefined (reading 'get')
at Object.getAccount (index.js:25:34)
at Store2.fetchAccount (account.js?t=1660704707512:29:33)
at Array.wrappedActionHandler (vuex.esm-bundler.js:305:23)
at Store2.dispatch (vuex.esm-bundler.js:1032:13)
at Store2.boundDispatch [as dispatch] (vuex.esm-bundler.js:914:21)
at Proxy.mappedAction (vuex.esm-bundler.js:1281:20)
at Proxy.created (App.vue:27:12)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at callHook (runtime-core.esm-bundler.js:2965:5)
Version 0.10.x
Windows
No response
Basically, it is just an update to the current vue todo list demo to feature the new features for vite and vue 3, including, but not limited to, composition api, pinia, and script setup.
Currently, it is seen that the demo project has already used vite under the hood, so why not use some of the new features it had already brought?
These new features include the new composition api, and the equally new <script setup>
syntax sugar, which simplifies how we write our script tags in vue, eliminating a lot of boilerplate code and making it feel like a more natural javascript experience.
here's an example from the project's Login.vue component (still working on it though, this code is just for demonstration purposes.):
before
<script>
import { mapActions, mapGetters } from "vuex";
export default {
name: "Login",
data() {
return {
email: "",
password: "",
};
},
methods: {
...mapActions(["login"]),
handleLogin(e) {
e.preventDefault();
console.log("Form submitted", this.email, this.password);
this.login({
email: this.email,
password: this.password,
});
},
}
};
</script>
after
<script setup>
import { useAccountStore } from "../stores/account.js";
import { refs } from "vue";
const account = useAccountStore();
const email: ref("");
const password: ref("");
const handleLogin = (e) => {
e.preventDefault();
console.log("Form Submitted", email.value, password.value);
account.login({
email: email.value,
password: password.value
})
}
</script>
This also demonstrated how pinia also simplifies how you access the state just by writing two lines of code:
import { useAccountStore } from "../stores/account.js";
const account = useAccountStore();
you would have immediate access to that store just by doing that! any method or reactive value set in the account store can now be accessed just by typing account.
. Its that simple!
Wow!
Another is the newer state management system, pinia. It also freshens up the experience in using a state management system, as it does not require modules and a main index.js
file to handle multiple state managements. Modules can now be in their own file, called stores, and does not need to be imported into a single index.js
file like what it used to be with vuex. Also, pinia can be imported easily through any components with ease.
your folder structure would be a noticeable difference when using pinia over vuex, look at the difference:
before
.
โ src
โโ store
โโ modules
โ โโ account.js
โ โโ todo.js
โโ index.js
after
.
โ src
โโ stores
โโ account.js
โโ todo.js
**No need for an index.js file anymore inside the src/store
folder!
You can even use the composition API in pinia, so that you can have that same boilerplate-less code for your state management system as well as your components!
here's an example comparison between the two. I used the account.js
as a reference from the project (still working on it though, this code is just for demonstration purposes)
before
import api from "../../api";
const state = {
account: null,
session: null,
};
const actions = {
signup: async ({ commit }, { email, password, name }) => {
try {
const account = await api.createAccount(email, password, name);
await api.createSession(email, password);
commit("setAccount", account);
} catch (e) {
console.log("Error creating Account");
commit(
"setError",
{
show: true,
message: e.message,
color: "red",
},
{ root: true }
);
}
},
fetchAccount: async ({ commit }) => {
try {
const account = await api.getAccount();
commit("setAccount", account);
} catch (e) {
console.log("Error getting Account");
}
},
login: async ({ commit }, { email, password }) => {
try {
console.log(email, password);
await api.createSession(email, password);
const account = await api.getAccount();
commit("setAccount", account);
} catch (e) {
console.log("Error creating Session", e);
commit(
"setError",
{
show: true,
message: e.message,
color: "red",
},
{ root: true }
);
}
},
logout: async ({ commit }) => {
try {
await api.deleteCurrentSession();
commit("setAccount", null);
} catch (e) {
console.log("Error deleting session");
commit(
"setError",
{
show: true,
message: "Failed to logout",
color: "red",
},
{ root: true }
);
}
},
};
const getters = {
getAccount: (state) => state.account,
getSession: (state) => state.session,
};
const mutations = {
setAccount: (state, account) => (state.account = account),
};
export default {
state,
actions,
getters,
mutations,
};
after
import api from "../../api"
import {defineStore} from "pinia"
import {ref} from "vue"
export const useAccountStore = defineStore("account", () => {
const account = ref()
const session = ref()
const error = ref()
const signup = async (email, password, name) => {
try {
const account = await api.createAccount(email,password,name)
account.value = await api.createSession(email,password)
} catch (e) {
console.error("Error creating account.")
error.value = {
{
show: true,
message: e.message,
color: "red",
}
}
}
}
const fetchAccount = async () => {
try {
const account = await api.getAccount()
account.value = account
} catch (e) {
console.error("Error getting Account")
}
}
const login = async (email, password) => {
try {
console.log(email, password)
await api.createSession(email, password)
const account = await api.getAccount()
account.value = account
} catch (e) {
console.error("Error creating Session:", e)
error.value = {
{
show: true,
message: e.message,
color: "red",
}
}
}
}
const logout = async () => {
try {
await api.deleteCurrentSession()
account.value = null
} catch (e) {
console.error("Error deleting Session")
error.value = {
show: true,
message: e.message,
color: "red",
}
}
}
return {
account,
session,
error,
signup,
fetchAccount,
login,
logout
}
})
so as you can see, it used less boilerplate code, and you write your methods without actions or even mutations! as if you were writing composition api from a vue component.
besides all of that, this is just a suggestion. i'm currently trying out appwrite, and im currently trying out on how to incorporate what i have learned from the new composition api, pinia, and script setup, to see how all of these works together, and i would love to see it with the new features vue 3 and vite had brought to us.
im also curious on what other people think about updating or adding another demo project that uses pinia and composition api. and i hope you would also like to try appwrite with these new features!
In the documentation (https://github.com/appwrite/demo-todo-with-vue#deploy-to-a-static-hosting-provider), there are multiple methods to deploy to a hosting provider, but Heroku is not one of them. I can work on this issue. BTW, here is how it will look:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.