Issue using polylang and vue-js

[Pedro Ferreira]

Hello i recently submited an issue , and tought it was resolved, but i was wrong!

So, I'm using polylang and vue js , i need to translate articles and pages from Portuguese to English. At first i thought there was a problem with my routes.js and i added:

{
    path: '/:slugs+',
    component: loaderPage('Page'),
    name: 'Page',
    props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() })
  },
  {
    path: '/en/:slugs+',
    component: loaderPage('Page'),
    name: 'PageEn',
    props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() })
  },

But i'm finding tons of bugs that i can get through, for example when switching to an english page, the vue program loads the "Single.vue" instead of the "Page.vue" ...The navbar does not change :(

But if i refresh the page or if i enter through an url the page and the navbar loads fine
The bugs usually ocurr while i browse in the program.
Furthermore the vue program also loads all of the articles , both the portuguese and the english :/
The poly lang plug in usually takes care of all the logic behind the language switch, but when used with vue it has lots of bugs!

This is more of a question than an issue! HOpe you could give me some help!
thanks in advance !

[Pedro Ferreira]

I also changed the post structure to this

So that the Single.vue wouldn't load instead of the Page.vue

[Julia]

Hey,

I'm also struggling with Polylang and this starter theme.
Did you manage to fix these issues?

[Pedro Ferreira]

Nope , apparently it doesn't support Polylang very well... i will keep looking into it...
will post a solution as soon as i can

[Julia]

I did a workaround for one of the issues (navbar not updating).
I know it's not the prettiest but it's better than nothing.

1. In WP admin, check "Force link to front page" in Polylang's language switcher
2. In NavMenu.vue add :class="{ 'no-router' : isPolylang(item.id) }" to the link item where the function isPolylang is isPolylang(menuId) { return (typeof menuId == "string") }
   This will force the window to refresh when the user click on the switch language links.

Now I'm trying to fix the blog page so that it only shows articles for the current language.

[Karol Piekarski]

Hey, how about adding the parameter ?slug=example&lang=LOCALE

[Szymon]

Hello, has anyone managed to implement with success vue.wordpress in a two-language blog?

[karolpiekarski]

@Cnk001 Yes, but the site must reload. Personally, I use Polylang + Loco

[Szymon]

How can I add a lang switcher (widgets are disabled with VueWordpress), is it possible to link to a post in another language (e.g. from NavMenu)?

[karolpiekarski]

@Cnk001

See screen. Here I have a page in Polish. You can add a language switch normally and it works.

[Szymon]

@Cnk001

See screen. Here I have a page in Polish. You can add a language switch normally and it works.

Ok, great! I tried to do it in widgets before. I had to enable this option in "Screen options" according to https://polylang.pro/doc/i-cant-add-the-language-switcher-in-the-menus/

https://polylang.pro/doc/create-menus/ (number 3 and 4)

Dzięki! ;-)

[karolpiekarski]

@Cnk001
If you still have any questions, you can write. I combined it with ACF PRO.

Cieszę się, że pomogłem! :)

[Szymon]

Do you resolved a problem with posts from all languages when you go to the homepage first time?

[karolpiekarski]

Yes, I added language information in the header and pass it in the parameters, and added it to

functions.php
`add_action( 'pre_get_posts', 'include_language' );

function include_language( $query )
{
if (isset($_GET['lang']) ) {
$lang = $_GET['lang'];
}

if($lang) {
$query->set( 'lang', $lang );
}
}`

[Szymon]

hmmm, it almost works, unfortunately sometimes the posts on the main page don't load at all, there is an error in the console:

Failed to load resource: the server responded with a status of 404 ()

/pl/wp-json/wp/v2/posts/?per_page=10&page=1:1

Uncaught (in promise) Error: Request failed with status code 404

    at createError (createError.js:16)

    at settle (settle.js:18)

    at XMLHttpRequest.handleLoad (xhr.js:59)    
createError.js:16 ```


error happens sporadically, not every time

[karolpiekarski]

I'm displaying posts on the /blog subpage. This is how my request looks like - wherever I download anything I added lang parameter

request: { type: "posts", params: { per_page: this.$store.state.site.posts_per_page, lang: baseTemplate.lang, page: this.page }, showLoading: true }, totalPages: 0

in header.php:

<script> var baseTemplate = { lang: '<?= pll_current_language('slug') ?>', } </script>

[Szymon]

Hmm, i think my main problem is that when I'm on the "sitename/en" page then the request is sent to the wrong address:

sitename /en/ wp-json/wp/v2/posts/?per_page=10&lang=en&page=1

but in source page the url to wp-json is correct: sitename/wp-json/... without lang directory before wp-json

so I hardcoded my domain in baseURL (in wp-content/themes/vue-wordpress/src/api/index.js)

[karolpiekarski]

How do you switch between languages, the page refreshes?

[Szymon]

it was when I entered the post, then changed the language and clicked on the logo to go to the home page (posts listing).

Currently trying to fix the link to the second language in the Single Post view (the first time the link is bad, only after refreshing is correct) and make other components also render after the first visit.

I installed facebook comments (https://github.com/malicoo/vue-facebook) and put them in Single view, but they also appear only after second refresh the post.