Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.2 KiB

Raw Permalink Blame History

name, description

name	description
using-stores-outside-components	Correctly using stores in navigation guards, plugins, and other non-component contexts

Using Stores Outside Components

Stores need the pinia instance, which is automatically injected in components. Outside components, you may need to provide it manually.

Single Page Applications

Call stores after pinia is installed:

import { useUserStore } from '@/stores/user';
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';

// ❌ Fails - pinia not created yet
const userStore = useUserStore();

const pinia = createPinia();
const app = createApp(App);
app.use(pinia);

// ✅ Works - pinia is active
const userStore = useUserStore();

Wrong: Call at module level

import { createRouter } from 'vue-router';
const router = createRouter({
  /* ... */
});

// ❌ May fail depending on import order
const store = useUserStore();

router.beforeEach((to) => {
  if (store.isLoggedIn) {
    /* ... */
  }
});

Correct: Call inside the guard

router.beforeEach((to) => {
  // ✅ Called after pinia is installed
  const store = useUserStore();

  if (to.meta.requiresAuth && !store.isLoggedIn) {
    return '/login';
  }
});

SSR Applications

Always pass the pinia instance to useStore():

const pinia = createPinia();
const app = createApp(App);
app.use(router);
app.use(pinia);

router.beforeEach((to) => {
  // ✅ Pass pinia instance
  const main = useMainStore(pinia);

  if (to.meta.requiresAuth && !main.isLoggedIn) {
    return '/login';
  }
});

serverPrefetch()

Access pinia via this.$pinia:

export default {
  serverPrefetch() {
    const store = useStore(this.$pinia);
    return store.fetchData();
  },
};

onServerPrefetch()

Works normally in <script setup>:

<script setup>
const store = useStore();

onServerPrefetch(async () => {
  // ✅ Just works
  await store.fetchData();
});
</script>

Key Takeaway

Defer useStore() calls to functions that run after pinia is installed, rather than calling at module scope.

2.2 KiB Raw Permalink Blame History