Vue 2.0 boilerplate for ProcessWire 3.0

[ferraky]

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.

[microcipcip]

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.

[ferraky]

Thank you for the feedback. I feel like this is a lot of overhead for this approach right now. Hopefully things will get better around SEO and SPA websites.

Thanks again!
 

 

[hellomoto]

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? 

[microcipcip]

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.

[thomasaull]

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:

 

[siilak]

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"

[microcipcip]

@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.

[siilak]

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.

[siilak]

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);
            }

 

[siilak]

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);
            }

 

[flydev]

@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 ?