Jump to content

Vue 2.0 boilerplate for ProcessWire 3.0


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


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];


        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) {
        $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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-07-03 -- SnipWire 0.8.7 (beta) released! Fixes some small bugs and adds an indicator for TEST mode 2020-04-06 -- SnipWire 0.8.6 (beta) released! Adds support for Snipcart subscriptions and also fixes some problems 2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  

      ---- INITIAL POST FROM 2019-05-25 ----
    • By louisstephens
      Just wanted to put it on everyone's radar that VueMastery is having a free weekend starting today at (12 ET). All videos in every course are free to watch until Sunday at midnight.
    • By Kiwi Chris
      I don't really have anything public to show, as nearly all the work is back-end, but I thought I'd post here anyway as it's a pretty good example of just how powerful Processwire can be.
      About a year ago, I inherited an incomplete Craft website made by a designer. Apart from the usual company information site, it was supposed to provide a customer portal for clients of a wine bottling company to make bookings for production runs.
      Data for stock levels of goods like bottles and labels was to come from an inventory management system Unleashed https://www.unleashedsoftware.com/
      Unleashed provides a REST API, so I had to integrate with that first by writing an API integration module, and then ended up using Processwire's core lazy cron module to periodically pull data from Unleashed using a custom module.
      The booking forms have a lot of conditional fields, eg if you are bottling a given wine variety, you should only be able to select labels that match that variety. All this conditional stuff was achieved with a lot of additions to ready.php.
      I also needed to be able to created a predefined set of pages when a new user is added if they have a 'client' role. Once again, more hooking in ready.php
      I've used the Admin Restrict Branch module so clients can only see their own records when they're logged in, but staff can see all records.
      Lister Pro provides the ability to search and view completed production runs.
      Part way through the project, as the client was happy with the way things were going, I was asked to add in logistics and dispatch which is provided by another company, which also runs Unleashed with a separate set of data, and with some clients who don't bottle wine, but will end up using the same portal, so using the roles and permissions inherent in Processwire, I set up production templates with separate roles to dispatch templates, so I could easily have clients assigned access to just the templates they need.
      Tracey Debugger got a thorough workout along the way, and the debugger console is an absolute killer tool for making quick changes to data when updating a live site to match changes from the dev site.
      At the start of this project, I'd used Processwire quite a bit, but never dived into module development or hooking, but I've now ended up with a reasonable idea how they work.
      @bernhard has produced some excellent tutorials which I found really helpful figuring out how to create modules, and other people like @Robin S have answered questions when I've got stuck. @ryan himself has been helpful when I've been trying to do things that push either the limits of my knowledge or Processwire or both 😋  .
      Could I have done this with other tools? Depends. Wordpress would have been as useless as using petrol to fight a fire, however something like ASP.Net COULD have done the job but would have probably made things a lot more complicated. In parallel, I've been working on building a REST API with ASP.Net for another client to integrate with an existing SQL Server database, and I've found that Visual Studio is inclined to break projects quite regularly, with dependencies getting messed up, or even whole configuration files getting corrupted when it has a hissy fit, so working with Processwire is a pleasure in comparison.
    • By Demo
      I'm a newbie to Process wire. I'm trying to pass the form values to a different URL (i.e to sales force). We have a RestAPI to do a post method with URL Prams. when we tested the rest API it works with static values. So, i select the the option called submit to another URL in actions tab in my form. 
      So now the issue is how can i pass the field values dynamically to the REST API prams on form submit?
      If their is any easy way to submit form details to sales force please advice.
      Thanks in advance!! 

    • By thomasaull
      I recently started to build Vue SPAs with ProcessWire as the backend, connected with a REST API. Thanks to code and the help of @LostKobrakai (How to use FastRoute with ProcessWire) and @clsource (REST-Helper) I got it up and running pretty quickly and now have put all of it in a site profile for others to use. It includes the REST API with routing for different endpoints, JWT Auth and a simple Vue SPA which shows the process of logging in a user (nevertheless, you don't have to use the Vue part, the API will work on it's own).
      Check it out here: https://github.com/thomasaull/RestApiProfile
      I'm pretty sure, it's not the perfect or most sophisticsted solution, but it gets the job done for me…
      Feedback or Improvements are very welcome
      Update: This site profile is a module now: https://github.com/thomasaull/RestApi
  • Create New...