Getting cross links from the Wordpress installation

[baxgas]

I have a difficulty to make the nav menu work with the fetched json data and nuxt-link (but possibly this is a question for building the navigation for the whole site)
My problem is that the links that are fetched from the wp json are different domain, and hence the nux-link appends it to the a href. Or am I doing something wrongly?
The code:

      <nav class="header__nav">
        <nuxt-link v-for="menu in menus" :key="menu.id" :to="{ path: menu.url }" >
            {{ menu.title }}
        </nuxt-link>
      </nav>

...

<script>

const hostAdress = "http://localhost:3080";

import Logo from '~/components/Logo'

export default {
  components: {   Logo  },
  data() {
    return { menus: [] }
  },
  mounted() {
    fetch(hostAdress + '/wp-json/wuxt/v1/menu')
    .then(response => {
      response.json().then(menus => {
        this.menus = menus;
      })
    })
  }

}
</script>

On the output I get

Thank you in advance and big thanks for making this framework! (a bit of Wiki/FAQ would be very-very nice though ;-) )

[curtisbelt]

Yeah, so the trouble is that it's dynamic content. could be a external URL, could be a relative path, could be full path of the current site. When I worked with WordPress/Nuxt, I solved this by creating my own global component. You could call it "WuxtLink".

Inside is the logic to check the URL:

• For external URLs, use an anchor tag.
• For relative URLs, use NuxtLink
• For full URLs from the current site, convert URL to relative path and use NuxtLink
• For if no URL exists, use span (in my case this occurred on sub menu headers)

Hope that helps.

[yashha]

When the json response contains the slug you could do following:

<nuxt-link v-for="menu in menus" :key="menu.id" :to="'/pathto' + menu.slug" >
      {{ menu.title }}
 </nuxt-link>

[baxgas]

slug was also what about I was thinking, but the json unfortunately doesn't contain the slug entry
this is what I receive on http://localhost:3080/wp-json/wuxt/v1/menu (truncated for one post)

13: {
ID: 13,
post_author: "1",
post_date: "2019-10-09 06:56:10",
post_date_gmt: "2019-10-09 06:56:10",
post_content: " ",
post_title: "",
post_excerpt: "",
post_status: "publish",
comment_status: "closed",
ping_status: "closed",
post_password: "",
post_name: "13",
to_ping: "",
pinged: "",
post_modified: "2019-10-09 06:56:42",
post_modified_gmt: "2019-10-09 06:56:42",
post_content_filtered: "",
post_parent: 0,
guid: "http://localhost:3080/?p=13",
menu_order: 2,
post_type: "nav_menu_item",
post_mime_type: "",
comment_count: "0",
filter: "raw",
db_id: 13,
menu_item_parent: "0",
object_id: "2",
object: "page",
type: "post_type",
type_label: "Page",
url: "http://localhost:3080/sample-page/",
title: "Sample Page",
target: "",
attr_title: "",
description: "",
classes: [
"",
"menu-item",
"menu-item-type-post_type",
"menu-item-object-page"
],
xfn: "",
current: false,
current_item_ancestor: false,
current_item_parent: false,
isCurrent: false,
level: 1,
children: [ ]
},

[curtisbelt]

A slug wouldn't be reliable anyway - think about nested pages for example, or if a custom URL is entered.

[yashha]

Another suggestion:

<vue-link  v-for="menu in menus" :key="menu.id" :to="'menu.url.replace('http://localhost:3080','')">
   {{ menu.title }}
</vue-link>

Using this component: https://github.com/Developmint/vue-link
It would be nice though to provide a wrapper component that takes the baseUrl as a param and removes it. Or takes it from process.env.

[curtisbelt]

Interesting, I guess what I had was kind of like vue-link but with the relational URL detection built in.

My strategy was to use nuxtServerInit to get the host and protocol dynamically, for portability.

async nuxtServerInit({ commit }, args) {
    if (process.server) {
      commit('SET_HOST_AND_PROTOCOL', {
        host: args.req.headers.host,
        protocol: args.req.headers['x-forwarded-proto']
      });
    }
}

and in the link component

/**
 * Fix absolute URLs which really should have been relative
 * Example: "http://myproject.localhost/about-us" -> "/about-us"
 */
const indexOfHost = url.indexOf('//' + context.parent.$store.state.host);
if (indexOfHost !== -1) {
  url = url.substring(indexOfHost + 2 + context.parent.$store.state.host.length);
}

[baxgas]

Sorry, had no luck with them :-(
But I think this functionality should be built in out-of-the-box (or down-from-the-git), since it is quite a basic stuff needed for every user (and menus are used more-less everywhere)

[baxgas]

OK, I found a workaround, making a const hostAdress (also adding it to the data() output) and then replacing it in the link
Like this:
const hostAdress = "http://localhost:3080";
:to="menu.url.replace(hostAdress,'')"
Works nicely, but I believe it can be solved better (also probably have to be changed for the live site and domain)
Think this feature could be improved, and also commited to the repo, so it works by default...

[northosts]

That's a relevant feature request and something we working on! It's related with getting page and post previews right, hope we come with an update soon.

[baxgas]

Thanks! There is space for improvements, but otherwise it is a great project, has nice perspectives for usage.

[Jamiewarb]

I very slightly modified Vue Link in order to produce a WpLink component that will strip off the WP URL (process.env.WUXT_WP_URL) for a link that was given to it, and use NuxtLink as the tag.

You can also use the WpLinkToApi component which won't longer strip off the Api host, in case you want to link through to images that are hosted by WordPress, for example.

https://gist.github.com/Jamiewarb/7787f36e1a3ed7636817e87314693487