bshiluk / vue-wordpress Goto Github PK

Hi again,
Another small issue. It fails to fetch the data if the slug contains html entities /wp-json/wp/v2/pages/?slug=this-is-a-%E0%A5%90-page. Happens with posts as well as pages.

Hi. I will intensely work with this for the next few weeks (or at least, this is what I highly hope to do if my manager allows the project to continue).

I am a beginner in Vue, like, really nub. I know the basics, I understand the MVC model, the directives and stuff like that. My issue:

Is anybody here available for a couple of hours of chit chat on this subject? I'm seeking for help to understand the following:

• How does the Vue receive the data from WordPress - How can I alter this, and how can I add post types and meta fields (from acf, for example) to my Vue?

• How can I make components behave based on an external state, or ones state (actually I have a pretty good idea about this but haven't done it yet so I'll just lay it off here)?

• How can I make it valid and make sure I don't write shitty code?

There are surely more How to's but I haven't hit them yet.

Even if no response is given to this issue, I am willing to discover those and log them here; for new people that might be using this and find their selves in this situation.

Hopefully it's approved for display,
Kind regards.

hey bucky, not an issue, rather a request: i want to support you supporting that theme. like catching up on the roadmap etc.
tell me how i can help, even if its simply money. but i do like what i see with that theme and i'd like to see it evolve..

I wanted to know why not using the <router-link>? We could use the benefit that comes with it, as such as the class="active" on the current & clicked nav item.

How do other folks deal with the class="active" on their theme?

Have you noticed that when you use Yoast SEO and write a custom meta title and then reload the frontend that the page title changes to the page name - site name.

Is this being changed through the vue app?

Hi @bucky355
Thanks for this awesome work you made with this repo. Very interesting aproach. I'll give it a try.

So far it's all working. Except that I can't run the dev mode (meaning: npm run dev). "npm run build" is perfectly working though.

The steps I tried (following your docs):
1.) startet "npm run dev" in the console, where the theme lives (seems to work: "compiled successfully")
2.) edited functions.php as described
3.) I open the url (localhost:8080) and only get a listing with files and folders of the root folder in my WordPress theme.

What am I doing wrong?

Thanks so much for helping me out.

Cheers

Michael

Hello,

In one of my page's content, I put a shortcode from the WpForms plugin to display a contact form.
When I access this page by using routes from my SPA, the JS and CSS files of WpForms are not attached.
However if I'm opening this page with its direct link, the JS and CSS files are attached.

How can I load the WP plugin's assets only on the contact page route?

Thank you.

Hi there, sorry to bother you again. Hoping for some advice from you.

If i understand correctly, the current pagination component is dependent on the route path to fetch the current page number.

I am making some custom components to create post grids and was wondering how to create pagination for the said component independent of the route path since there's no need to change the route and there will be multiple grids on the single page.

I have created something similar before like so:

var postsList = new Vue({
                el: "#app",
                data: {
                    posts: [],
                    page: 1,
                    perPage: 10,
                    pageNumber: ''
                },
                mounted: function() {
                    this.fetchData();
                },
                methods: {
                    fetchData: function( page = this.page, perPage = this.perPage ) {

                        axios.get( '/wp-json/wp/v2/gallery', { 
                            params: {
                                    per_page: perPage,
                                    page: page
                            }
                        })
                        .then(response => {
                            this.posts = response.data,
                            this.pageNumber = response.headers['x-wp-totalpages']
                        })
                        .catch((error) => {
                                console.error(error)
                        })
                    }
                },
                watch: {
                    "perPage": function(pp) {
                        if(pp < 10 && pp > 0){
                        this.fetchData(1, pp);
                        this.page = 1;
                        }
                    }
                }

            })

<nav>
    <button type="button" v-if='page > 1' v-on:click="fetchData(page -= 1)" class="btn nav-prev">Newer</button>
    <button type="button" v-if='page != pageNumber' v-on:click="fetchData(page += 1)" class="btn nav-next">Older</button>
</nav>

I am a bit confused as to how to create the pagination with how the theme is currently setup.
This is my grid component:

<template>
    <div class="sw-module">
        <div class="sw-fa-wrapper sw-grid-1">
          <div v-if="posts.length" class="sw-fa-grid">
              <post-list
                v-for="post in posts"
                :key="post.id"
                :post="post"
                :size="post.media_414x276"
              />
          </div>
        </div>
  </div>
</template>

<script>
import PostList from '@/components/grids/PostList'
import ListPagination from '@/components/grids/ListPagination'

export default {
  name: 'GridOne',
  components: {
    PostList,
    ListPagination
  },
  props: {
    type: {
      type: String,
      required: true
    },
    offset: {
      type: Number,
      required: false
    },
    per_page: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      request: {
        type: this.type,
        params: { 
          per_page: this.per_page || this.$store.state.site.posts_per_page,
          offset: this.offset,
          page: 1
        }, 
        showLoading: true 
      },
      totalPages: 0
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
    setTotalPages() {
      this.totalPages = this.$store.getters.totalPages(this.request)
    }
  },
  created() {
    this.getPosts().then(() => this.setTotalPages())
  }
}
</script>

<grid-one 
          type="video"
          :per_page=3
      />

I'm trying to open open single pages and instead of rendering the component Page.vue it renders the Single.vue component giving me this error

I thought this is was my issue and was worried that the vue-router could not distinguish the difference between a post and a page, because the URL was basically the same (which was a bad thought on my part).
I used the url http://vue-wordpress-demo.bshiluk.com/wp-json/wp/v2/pages and saw that you were in fact navigating between POSTS and Pages with no problems.

I don't know what else to do , i even cloned the repository again to try to reproduce the errors, and without changing any code the error ocurred again.

Sorry to bother , but i could use the help.

The only diferrence between my code and yours right now, is that i use dynamic routing

routes.js

import { loaderPage } from '@helpers/loaderComponents';

and for example

 {
    path: '/404',
    component: loaderPage('NotFound'),
    name: '404'
  },

loaderComponent.js

export const loaderComponent = (path) => () => import(/* webpackChunkName: '[request]' */ `@components/${path}`).then(m => m.default || m);
export const loaderPage = (path) => () => import(/* webpackChunkName: '[request]' */ `@pages/${path}`).then(m => m.default || m);

I can navigate to posts, author page and categories pages with no problem, but as soon as i enter a page it does not load

Hi,
I just noticed that the document.title is showing encoded post titles.

Thank you :)

Hey Bucky! This theme looks like exactly what I am trying to achieve when integrating Vue and Wordpress.

Running into the following issue when installing the localizer plugin:

Warning: require(/app/public/wp-content/plugins/rest-api-data-localizer/store/key/callback.php): failed to open stream: No such file or directory in /app/public/wp-content/plugins/rest-api-data-localizer-master/radl.php on line 62 Fatal error: require(): Failed opening required '/app/public/wp-content/plugins/rest-api-data-localizer/store/key/callback.php' (include_path='.:/usr/share/php:/www/wp-content/pear') in /app/public/wp-content/plugins/rest-api-data-localizer-master/radl.php on line 62

Running this locally on NGINX / PHP 7.2

Any Idea? Thank you for your work on this.

Hi, I am trying to set up a search page and am trying to use v-model in a custom component, however, watching the v-model property is not updating 'getItems'. I see the changes getting reflected in the vue development tools in the postsRequest.params but i'm unable to fetch the updated items and the posts computed property remains unchanged.

I asked this question on stackoverflow and and a user has commented this:

you are watching searchAuthor so when it changes you are mutating the postsRequest object then calling the store action getItems (also the syntax is correct but i'm not sure what exactly it does... if you don't see the data change then it is the reason) so you need to understand what this API is doing to your store after you give it the data objects.

I'd appreciate if you could point me in the right direction.

My code:

<template>
  <main class="site-content">
    <div class="container">
        <div class="advanced-search">
            <input type="text" 
                name="searchTerm"
                placeholder="Search title..." 
                tabindex="1"
                v-model="searchTerm">
            <select v-model="searchAuthor">
                <option value="">All</option>
                <option 
                    v-for="author in authors"
                    :value="author.id"
                    :key="author.id">{{ author.name }}</option>
            </select>
            <select v-model="searchTopic">
                <option value="">All</option>
                <option 
                    v-for="topic in topics"
                    :value="topic.id"
                    :key="topic.id">{{ topic.name }}</option>
            </select>

        </div>
    
        <section v-if="posts">
            <post-item
                v-for="post in posts"
                :key="post.id"
                :post="post"
            />
        </section>
    </div>
  </main>
</template>

<script>
import PostItem from '@/components/template-parts/PostItem'

export default {
    name: 'Search',
    components: {
        PostItem,
    },
    data() {
        return {
            postsRequest: {
                type: 'quote',
                params: {
                    per_page: 5,
                    search: null,
                    authors: null,
                    tags: null
                },
                showLoading: true
            },
            authorsRequest: {
                type: 'authors',
                params: {
                    per_page: 100,
                },

            },
            topicsRequest: {
                type: 'tags',
                params: {
                    per_page: 100,
                },
            },
            searchTerm: '',
            searchAuthor: '',
            searchTopic: ''
        }
    },
    watch: {
        "searchAuthor": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = this.searchAuthor
            this.postsRequest.params.tags = null
            this.getPosts()
        },
        "searchTopic": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = this.searchTopic
            this.getPosts()
        },
        "searchTerm": function() {
            this.postsRequest.params.search = this.searchTerm
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = null
            this.getPosts()
        }
    },
    computed: {
        authors () {
            return this.$store.getters.requestedItems(this.authorsRequest)
        },
        topics () {
            return this.$store.getters.requestedItems(this.topicsRequest)
        },
        posts() {
            return this.$store.getters.requestedItems(this.postsRequest)
        }
    },
    methods: {
        getAuthors() {
            return this.$store.dispatch('getItems', this.authorsRequest)
        },
        getTopics() {
            return this.$store.dispatch('getItems', this.topicsRequest)
        },
        getPosts() {
            return this.$store.dispatch('getItems', this.postsRequest)
        },
    },
    created() {
        this.getAuthors()
        this.getTopics()
        this.getPosts()
    },
}
</script>

Hi, thanks for the topic it is very good
I couldn't install sass it generates errors and I tried to install many npm of scss but I manage to advance the maximum that I have advanced in this is with this error.

ERROR in ./src/app.js Module not found: Error: Can't resolve './scss/styles.scss' in 'C:\laragon\www\demo2a\wp-content\themes\vue-wordpress\src' @ ./src/app.js 5:0-28 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/app.js i ｢wdm｣: Failed to compile.

this is my json
{ "name": "vue-wordpress", "private": true, "scripts": { "dev": "webpack-dev-server --env=dev", "build": "webpack --env=prod" }, "devDependencies": { "@babel/core": "^7.2.2", "axios": "^0.18.0", "babel-core": "^6.26.3", "babel-loader": "^8.0.5", "babel-preset-env": "^1.7.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.2.0", "css-loader": "^2.1.0", "mini-css-extract-plugin": "^0.5.0", "node-sass": "^5.0.0", "sass": "^1.54.5", "sass-loader": "^10.0.5", "vue": "^2.6.6", "vue-loader": "^15.6.2", "vue-router": "^3.0.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.6", "vuex": "^3.1.0", "webpack": "^4.46.0", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.1.14" }, "dependencies": { "@types/sass": "^1.43.1", "@types/sass-loader": "^8.0.3" } }
Thank you

Hi!

Can anyone point me in the right direction on how can routing properly for woocommerce ?
Actually, I follow the steps from [#15], but still not working.

Any solutions? Thanks in advance.

How i can use contact form 7 after production build? Its possible?

The plugin rest-api-data-localizer is not working with this theme. I have error after install plugin. Please check thanks

There is any image lightbox which can be simply installed? All of post content is in variable post.content.rendered, so I don't have idea how can make it well..

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 !

Hi, thank you for the theme.

I would like to develop this theme into an interactive forum (like bbpress). I have some experience in working with Wordpress but I'm still new to Vue. I usually use a form plugin called Formidable Forms for user interactions within my site.

1. I created a "Submit a forum topic" form for users to submit new topic. I tried integrating the form plugin, using shortcodes in pages, within this theme. It does submit the topic correctly, however, it reloads the page. The form has a "submit with ajax" option but it isn't working here.

2. Can you please guide me in how to make the comment system work (validation, submission, pagination & replying on comments) in this so that users can comment on the topics?

3. How do I get the logged in user info? Do I need to create a callback in the RADL or is it already integrated in the theme.

Awesome mind blowing work : Need latest update

Can you tell me how to create sidebar and widgets in footer?

Hello,

I am using this vue- wordpress theme, I have added custom post type but I am facing issue with routing. Could you show me where I can change for routing for custom post type.

I have tried changing in routes.js and path.js but it's not working for me. So please help me with this.

Expecting reply from your end ASAP.

Thank you in Advance.

i used Open Search to compile the results page, i created search.php file but the page return me allways 40 template.

Whats wrong?

Bye

Library/Caches/node-gyp/14.4.0/include/node/v8.h:3642:37: note: candidate function not viable: requires 3 arguments, but 2 were provided V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,

I am getting the following error on macOS Catalina but after searching I found out it might be because I'm not using NodeJS v12.18.1.
Can you confirm or add the nodejs version to the readme?

I am running WordPress in Nginx.
installed everything like it's said in the doc.

Enabled dev mode

// Enable For Production - Disable for Development
// wp_enqueue_script('vue_wordpress.js', get_template_directory_uri() . '/dist/vue-wordpress.js', array(), null, true);

// Enable For Development - Remove for Production
wp_enqueue_script( 'vue_wordpress.js', 'http://localhost:8080/vue-wordpress.js', array(), false, true );

then

npm run dev

http://localhost:8080/

Now when i visit http://localhost:8080/ i get directory list, but when i visit mysite.local i get plain wordpress without any vueJs component

This may be outside of the scope of the project, but can you give any insights or advice on getting code splitting/lazy loading routes to this theme?

Bundle sizes can get out of control, so having this would put this theme over the top of anything else I've found.

Thanks!

Hi,

How do I make custom post types work with this theme? I would really appreciate a bit of guidance.

Thank you

I am wondering if it's possible to integrate this BP rest api plugin in this theme. If so, can you please explain a bit, how to go about it.

Thank you for your time and thank you for making this theme. Having fun learning here.

Hi all!
I'm totaly newbie here.
I'm trying to deploy this theme on local machine. After pressing "activate" on rest-api-data-localizer plugin in WP dashboard - an error appears Fatal error: require(): Failed opening required '/Users/admin/Projects/mamp/zzz/wp-content/plugins/rest-api-data-localizer/store/key/callback.php' (include_path='.:/Applications/MAMP/bin/php/php7.1.32/lib/php') in /Users/admin/Projects/mamp/zzz/wp-content/plugins/rest-api-data-localizer-master/radl.php on line 62
The destination in the error is correct and there is callback.php file in /Users/admin/Projects/mamp/zzz/wp-content/plugins/rest-api-data-localizer/store/key folder.
Runing this on mamp with php 7,1.
Any help is appreciated.

Hi,
It's possible to add language paths in the routing file, but I've noticed that they're not working.

Thanks a lot

Hi @bucky355

I would like to extend the theme with multilanguage support with the help of the wpml plugin (https://wpml.org/)

Do you have any ideas, how to start? Any hints, how to achieve it?

Thanks a lot

Cheers

Michael