Jump to content

Vue 2.0 boilerplate for ProcessWire 3.0


microcipcip

Recommended Posts

Just curious if anyone has used this or a similar approach in production? If so, can anyone post comments on hurdles, challenges etc...? I have a site I'm working on but am having second thoughts on this approach because of SEO, but I'm not sure if I should be concerned with SPA websites and SEO anymore.

Link to comment
Share on other sites

I have a site in production with this Vue boilerplate.

Indeed, I had problems with SEO and google took a long time to index all pages, I used https://prerender.io/ for indexing nested routes otherwise google wouldn't have been able to do so. It really depends on the type of app you're building, but if you can install node in the server you could use nuxt.js and in this way every route will be easily indexed. However you'll have to either build your REST API with node or connect to it with PW. If it is not managed by a client you can just use nuxt.js as is.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hey how do I get started? What I did was copy all the template files into my existing project and follow the instructions given for the templates setup. Then I deleted the homepage calls for a stylesheet and javascripts that don't exist (in client/dist/) and added vue.js... I'm totally new to vue.js so please excuse my ignorance and if you can give me any tips on how to begin I would deeply appreciate it... I know I'm being awfully vague... How can I pass all the pages to a vue instance to build a navigation, for starters? or should I just do that with PHP? 

Link to comment
Share on other sites

19 hours ago, hellomoto said:

How can I pass all the pages to a vue instance to build a navigation, for starters? or should I just do that with PHP? 

Have you built the JSON API endpoint? Are you able to access it from your browser? If you do, then it should be easy to access it with Axios and VueJS.

Link to comment
Share on other sites

Hey hey, since I took a slightly different approach connecting my SPA with ProcessWire I created a new example site profile. The JWT-Auth stuff is in there, but honestly it's not very complicated, so I guess it could easily implemented anywhere else! Check it out:

 

  • Thanks 1
Link to comment
Share on other sites

  • 5 months later...

I added file field called "video". Result in API is 

"video": [
        {
            "data": "filename.mp4",
            "description": "[\"\"]",
            "modified": "2018-04-22 23:08:59",
            "created": "2018-04-22 23:08:59",
            "filedata": null
        }
    ],

 

But how I can show "data" field as a httpUrl with full path "/site/assets/files/PageID/filename.mp4"

Link to comment
Share on other sites

@siilak Unfortunately I think I did not test the REST API with the file type, only with images. I think it requires changes to work with video type.
As I said in the first post in this thread
 

Quote

My REST API may have bugs, this is just an example of an integration with ProcessWire, I suggest you either build your own REST API or use the awesome GraphQL module by @Nurguly Ashyrov.


The reason I have built this site template was because many people asked me how I connected ProcessWire with VueJS. Hopefully it is still a good starting point, but I'd definitely look at GraphQL implementation for a solid REST API.

Link to comment
Share on other sites

6 hours ago, microcipcip said:

@siilak Unfortunately I think I did not test the REST API with the file type, only with images. I think it requires changes to work with video type.
As I said in the first post in this thread

Thank you for a answer. In pagefields.php are good solution for a images. I also trying to write a file field part.

Link to comment
Share on other sites

  • 3 weeks later...

There is a solution for filefield. In pagefields.php file add after image_fields

'file_fields' => [ 'fields' => ['description', 'httpUrl'], ],

Then after private function getImages

private function getFiles($p, $fld)
    {
        $fldName = $fld->name;
        $files = [];
        $i = 0;
        foreach ($p[$fldName] as $file) {

            $fileConf = $this->conf['file_fields'];

            foreach ($fileConf['fields'] as $fileField) {
                $files[$fldName][$i]['file'][$fileField] = $file[$fileField];
            }

            $i++;
        }

        return $files;
    }

Then make a change for field type  

	if ($fldType instanceof FieldtypeImage) {
                $flds = array_merge($this->getImages($p, $fld), $flds);
            } else if ($fldType instanceof FieldtypeFile) {
                $flds = array_merge($this->getFiles($p, $fld), $flds);
            } else if ($fldType instanceof FieldtypeRepeater) {
                $flds = array_merge($this->getRepeaters($p, $fld), $flds);
            } else {
                $flds = array_merge($this->getFields($p, $fld), $flds);
            }

 

  • Thanks 1
Link to comment
Share on other sites

  • 5 weeks later...

I also made function for Page Reference field in pagefields.php.

private function getReference($p, $apiField) {
        $p->of(false);
        $pages = $apiField->name;
        $id = $p->get($pages);
        $apiFields = [];

        if ($id) {
            $output[$pages]['title'] = $id->title;
            $output[$pages]['name'] = $id->name;
            $output[$pages]['url'] = $id->url;
            return $output;
        }
        return $apiFields;
    }

Then add this to function "getAllFields"

else if ($apiFieldType instanceof FieldtypePage) {
                $apiFields = array_merge($this->getReference($p, $apiField), $apiFields);
            }

 

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

@microcipcip I am porting this profile to work with GraphQL. I mixed vue, vuex, apollo-boost and graphql and actually, everything is fine. I can query the endpoint, update components, etc. Working now on implementing  JWT authentication.

 

As I am quite new in the Vue ecosystem, I was wondering why you suggested vue-supply ?

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...