vuejs and processwire

[bmacnaughton]

I'm starting a project using vuejs and ProcessWire. I'm running into a number of questions and am hoping someone has gone down this path before.

 

1. I'm not sure which way to go: create a vuejs single-page-app or just create components and serve them from PW.

2. Vuejs components naturally tend to contain UI text - how do you handle about localization in that context. I like PW's localization capabilities and would prefer not to have two different systems. Is there some way to have components load all their user-visible text at runtime? I guess PW could create Vue.js apps that pass all the props to a given component when it is invoked, but that seems a bit messy.

3. Should I think about server-side-rendering or serving webpack units to the client?

4. For development, I am using webpack-dev-server and proxy API calls to another server (initially express as a mock but it will be PW) in webpack.config.js. Does this make sense?

As you can tell, I'm just getting started on this so any help is appreciated.

[qtguru]

2 hours ago, bmacnaughton said:

I'm starting a project using vuejs and ProcessWire. I'm running into a number of questions and am hoping someone has gone down this path before.

 

1. I'm not sure which way to go: create a vuejs single-page-app or just create components and serve them from PW.

2. Vuejs components naturally tend to contain UI text - how do you handle about localization in that context. I like PW's localization capabilities and would prefer not to have two different systems. Is there some way to have components load all their user-visible text at runtime? I guess PW could create Vue.js apps that pass all the props to a given component when it is invoked, but that seems a bit messy.

3. Should I think about server-side-rendering or serving webpack units to the client?

4. For development, I am using webpack-dev-server and proxy API calls to another server (initially express as a mock but it will be PW) in webpack.config.js. Does this make sense?

As you can tell, I'm just getting started on this so any help is appreciated.

Hi I am going to be honest I have used both but not as extensive as you have, If you are going to use VueJS via SPA, then it won't matter whether you use Processwire as you would simply be concerned about your JSON Data, which any API/Service can equally play that role. As for your webpack-dev-server i don't think it matters as SPA is only concerned about the data, meaning Express, Golang,Spring can easily serve the JSON and it won't make any difference, as for SSR am gonna be honest am still not sure what SSR really is, Maybe i should read more detailed articles on it. all the best, I would simply advise to using VueJS as components for your pages. But it depends on your aim though 

[LostKobrakai]

5 hours ago, bmacnaughton said:

1. I'm not sure which way to go: create a vuejs single-page-app or just create components and serve them from PW.

It depends on the use-case. 

5 hours ago, bmacnaughton said:

2. Vuejs components naturally tend to contain UI text - how do you handle about localization in that context. I like PW's localization capabilities and would prefer not to have two different systems. Is there some way to have components load all their user-visible text at runtime? I guess PW could create Vue.js apps that pass all the props to a given component when it is invoked, but that seems a bit messy.

Take a look at vue-i18n. You could probably provide the translations via json fueled by processwire's translation features.

5 hours ago, bmacnaughton said:

3. Should I think about server-side-rendering or serving webpack units to the client?

Server-side rendering is only supported in node (and not just V8, which could be run in php). Therefore you'd need to add yet another environment to your stack. I'd only go that route if you're creating a fully (node served) vuejs app with processwire just serving data via an api.

5 hours ago, bmacnaughton said:

4. For development, I am using webpack-dev-server and proxy API calls to another server (initially express as a mock but it will be PW) in webpack.config.js. Does this make sense?

Without the dev server (and hot module replacement) developing anything more in the SPA direction will be a pain, so yeah it does make sense. You could also use processwire like you do without webpack and just switch the javascript url in your template to the url webpack does provide the script on. 

[microcipcip]

8 hours ago, bmacnaughton said:

1. I'm not sure which way to go:

 create a vuejs single-page-app or just create components and serve them from PW.

I agree with @LostKobrakai that it really depends on what kind of app you're building. I have built two websites with SPA+Rest APi and one hybrid with CMS+VueJS and the SPA website was easier to build but more difficult to get indexed on google whereas the hybrid one was more difficult to build (much more difficult) but easier to index.

Quote

2. Vuejs components naturally tend to contain UI text - how do you handle about localization in that context. I like PW's localization capabilities and would prefer not to have two different systems. Is there some way to have components load all their user-visible text at runtime? I guess PW could create Vue.js apps that pass all the props to a given component when it is invoked, but that seems a bit messy.

Same as @LostKobrakai.

Quote

3. Should I think about server-side-rendering or serving webpack units to the client?

Same as @LostKobrakai

Quote

4. For development, I am using webpack-dev-server and proxy API calls to another server (initially express as a mock but it will be PW) in webpack.config.js. Does this make sense?

Yes that's the easier way to do it.

[bmacnaughton]

Quote

Quote

2. Vuejs components naturally tend to contain UI text - how do you handle about localization in that context. I like PW's localization capabilities and would prefer not to have two different systems. Is there some way to have components load all their user-visible text at runtime? I guess PW could create Vue.js apps that pass all the props to a given component when it is invoked, but that seems a bit messy.

Same as @LostKobrakai

 

I don't follow. Lost suggest both vue-i18n (which I've looked at) and sending text string via AJAX. Do you use one or both approaches?

 

 

[microcipcip]

I haven't built a multilang website with PW and Vue, but I guess you'd use something like this https://kazupon.github.io/vue-i18n/dynamic.html and with PW you'd generate the right Rest API to handle the multilanguage features?

[bmacnaughton]

OK, thanks. I guess I'm exploring a little bit. PW makes localization pretty straightforward; this will be a bit more challenge.