LazyDali
LazyDali
PostsComments
NNuxt
Created by LazyDali on 5/24/2024 in #❓・help
Nuxt SSR + Supabase security
Hello everyone, I am building a project with Nuxt SSR + Supabase and I was wondering if I had to worry about CSRF and XSS. I was under the impression that the frontend and backend were secured enough together as they are managed in the same app (🤝). Supabase facilitates the login and its RLS is quite convenient. I believe the Nuxt-Security module would be useful (ex. Rate Limiters) but is this a module any project absolutely need? Also, if I setup a server API between the client and Supabase, how should I manage the security and permissions within the API? Thanks in advance!
3 replies
NNuxt
Created by LazyDali on 4/17/2024 in #❓・help
Updating a rendered list of components
Hello, here is the stack used (with TypeScript): - "@nuxt/devtools": "^1.1.5", - "@nuxtjs/supabase": "^1.2.0", - "@nuxtjs/tailwindcss": "^6.11.4", - "@types/node": "^20.12.7", - "nuxt": "^3.11.2", - "nuxt-icon": "^0.6.10", - "vuetify-nuxt-module": "^0.13.2" And here is my issue: I am updating a list of rendered components but I get this console warning message: 
[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
In the script setup, I declare the empty tasks list and define the functions (fetchTasks and addTask). In the onMounted hook, I call the fetchTasks. The web page has a button to add a new Task and after the new task is submitted to Supabase, it is added in the tasks list using unshift. Then, I get the console warning message above. I also see the same warning message when I modify the code and the hmr is triggered by vite or even sometimes when I refresh the browser. It seems that there is a timing issue between rendering and server/client code being executed. The list of components is nothing fancy: 
<div v-if="tasks.length > 0">
  <transition-group
    name="task-list"
    tag="ul"
    class="dynamic-list"
  >
    <TaskCard
      v-for="task in tasks"
      :key="task.id"
      class="task-card"
      :task="task"
      role="li"
      @task-deleted="handleDeletedTask"
    />
  </transition-group>
</div>
<div v-if="tasks.length > 0">
  <transition-group
    name="task-list"
    tag="ul"
    class="dynamic-list"
  >
    <TaskCard
      v-for="task in tasks"
      :key="task.id"
      class="task-card"
      :task="task"
      role="li"
      @task-deleted="handleDeletedTask"
    />
  </transition-group>
</div>
Here is what I tried (unsuccessfully): - defining this specific page as { ssr: false } in the nuxt router config, - adding a <ClientOnly> tag in the template around the form using the functions, - moving the tasks declaration and functions in the onMounted hook but TypeScript complains because the functions refered in the template are then not declared. Does anybody have a suggestion to get rid of this warning message? Thanks!
2 replies
NNuxt
Created by LazyDali on 12/3/2022 in #❓・help
Tailwind preventing basic HTML tags to render properly
No description
3 replies