🔖 Feature description

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.

🎤 Pitch

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!

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

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:

• set up the docker network differently (I only just installed docker on this machine, which is running Ubuntu 20.04 (desktop))
• change my answers in the setup script (I kept the defaults, though I made my own API key)
• install this example app in a docker container as well and set it to the same subnet as the appwrite backend (no idea how to do that, I don't have any experience with docker)
• read the instructions more carefully (I doublechecked several times already, but who knows ...)
• use a different operating system than Ubuntu 20.04

tldr: This guide (or the app itself) does not work as-is.

👟 Reproduction steps

Refresh the page after login

👍 Expected behavior

Stay logged in

👎 Actual Behavior

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)

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

Just create a new account in Signup

👍 Expected behavior

Signing up should go through with new credentials

👎 Actual Behavior

Getting error:

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Linux

🧱 Your Environment

This is the demo app

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

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.

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:

Introduction

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.

Tasks summary:

• Fork & clone this repository
• Prepare bug report issue form in .github/ISSUE_TEMPLATE/bug.yaml
• Prepare documentation issue form in .github/ISSUE_TEMPLATE/documentation.yaml
• Prepare feature request issue form in .github/ISSUE_TEMPLATE/feature.yaml
• Push changes to master and test issue forms on your fork
• Submit pull request

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!