iamntz Posts - Answer Overflow

iamntz

•Created by iamntz on 8/23/2024 in #❓・help

Translate custom routes with i18n?

I'm trying to create a custom route that's also translatable, but for some reasons it doesnt quite work. whenever i'm trying to use it:

const localePath = useLocalePath()
localePath('miau')

const localePath = useLocalePath()
localePath('miau')

I'll get the translated path name, not the translation. I.e. i'll get /en/miau (instead of /en/miau-translated). The path DO WORK, the translation is the only problem

const router = useRouter();
router.getRoutes()

const router = useRouter();
router.getRoutes()

will list the right route, similar to the pages that are working:

[
{
  "path": "/en/miau",
  "name": "miau___en",
  "meta": {},
  "props": {
    "default": false
  },
  "children": [],
  "instances": {},
  "leaveGuards": {
    "Set(0)": []
  },
  "updateGuards": {
    "Set(0)": []
  },
  "enterCallbacks": {},
  "components": {},
  "__vd_id": "46"
},
// ... same for IT
{
    "path": "/en/about-us",
    "name": "about___en",
    "meta": {},
    "props": {
      "default": false
    },
    "children": [],
    "instances": {},
    "leaveGuards": {
      "Set(0)": []
    },
    "updateGuards": {
      "Set(0)": []
    },
    "enterCallbacks": {},
    "components": {},
    "__vd_id": "24"
  },
]

[
{
  "path": "/en/miau",
  "name": "miau___en",
  "meta": {},
  "props": {
    "default": false
  },
  "children": [],
  "instances": {},
  "leaveGuards": {
    "Set(0)": []
  },
  "updateGuards": {
    "Set(0)": []
  },
  "enterCallbacks": {},
  "components": {},
  "__vd_id": "46"
},
// ... same for IT
{
    "path": "/en/about-us",
    "name": "about___en",
    "meta": {},
    "props": {
      "default": false
    },
    "children": [],
    "instances": {},
    "leaveGuards": {
      "Set(0)": []
    },
    "updateGuards": {
      "Set(0)": []
    },
    "enterCallbacks": {},
    "components": {},
    "__vd_id": "24"
  },
]

5 replies

NNuxt

•Created by iamntz on 8/16/2024 in #❓・help

How would you build a ... search page?

hey guys, what would be the right approach on building a search page with nuxt? the system i'm building has a 3rd party server that serves the whole data (including search functionality) and the requirements are: - have the ability to send some filter params to the server (categories, tags etc) & sort them (asc/desc, by relevance, date, title whatnot) - keep the state of the filters in the URL - on initial page load, get the filtered results according to the URL filters - display the results in a certain page (e.g. /search) - hide the actual api call on the frontend my initial idea was „hey, i'm gonna use a regular form and send the filters as GET”, but things are... not ideal, as this requires a page reload and have all kind of odd effects (and i can't use nuxt-link for a form lol :D) what i've done instead is: - used form actions https://form-actions-nuxt.pages.dev/usage/form-actions module - keep the filter state in a query = reactive({}) object - update stuff in router: router.replace({ query }) - on page load, i initialize the query = reactive({...params from useRoute().query }) Now, this do work, it's all good. BUT this feels a bit ... hacky? or that's the way to go? thanks!

4 replies

Gaming

Programming