Idea form

On the home page, the logged in users should be able to add their ideas to the Appwrite database. The form needs a text field for filling in the title, a textarea for the description, and a submit button.

From the components directory, add the file IdeasForm.vue and add the following code.

Next, add the component to the page pages/index.vue by auto-importing it in the <template> tag. In doing that, we need to take a moment to think about how we want to display the form to the users.

Since it should only be shown to logged in users, we need to wrap it in a <section> that renders conditionally when the isLoggedIn reference in the useUserSession is true. If the requirement is not met, we show a paragraph with some information to the user instead.

Add the following code to the index.vue page to conditionally render the form and information paragraph.

Overwrite the contents of pages/index.vue with the following code.

Ideas list

Now that we can get some ideas to show, we go on to build the component for the list of ideas.

Once again, we need to take a moment to think about how this component should work. First of all, the ideas should be visible for the users before any interaction has taken place on the page. To catch that moment in time when the page loads, we call our fetch function, that fetches the ideas in Appwrite, from the built-in onMounted function.

Second, it's likely that a user will want to delete one of their ideas from the database. We help them do that by adding a delete button in the top right corner of the idea list item, but only on the ideas added by the user itself.

Add the file IdeasList from the components directory and insert the following code:

Return to the file pages/index.vue once more to import the list of ideas. This component should be visible to all users, so no conditional rendering needs to be handled.

Congratulations! You now have an ideas tracker built with Nuxt and Appwrite to use locally.