search

swey / fractal-vue-adapter

Vue template adapter for Fractal.
11 stars 5 forks source link

Usage? #7

Closed antangible closed 5 years ago

antangible commented 5 years ago

Can you provide some note on the usage? It would be appreciate, thanks.

swey commented 5 years ago

If you don't see the use case, you probably don't need it :)

We use fractal (https://fractal.build/) as pattern lib for our Vue components. Fractal supports different template languages via adapters (Handlebars, Twig, etc.) and with this adapter also Vue templates and Vue single file components.

(In our projects we also use Vue for server and client side rendering.)

antangible commented 5 years ago

Yea, I use Fractal too, but I have no experience with adapters and its integration, if you could write down some lines of code about the usage will be great. :-)

swey commented 5 years ago

You have to add this adapter via github to your project, e.g. in the package.json:

"@swey/fractal-vue-adapter": "swey/fractal-vue-adapter#v0.3.5",

In your fractal.js just set the engine like this:

const Vue = require('vue');

fractal.components.set('engine', '@swey/fractal-vue-adapter');
fractal.components.set('ext', '.(vue|html)');

In the fractal.js you can also add plugins, e.g.:

Vue.use(require('./src/js/plugins/GlobalsPlugin'));

But I see, I have to add some documentation. Thanks for your feedback!

antangible commented 5 years ago

Nice! It works :-) Thanks friend.

swey commented 5 years ago

Great!

Please note that you're in a server side rendering context, so the rendering is similar to the rendering in Nuxt. E.g. window is not available or mounted will not be called.

We also developed an own hydration system to replace server renderings with client side renderings, but this is not part of this package. So if you run into some problems, just contact me again.

Happy to hear that more people use this adapter :)

antangible commented 5 years ago

Ah understood. I didn't know Nuxt, in fact I'm going to start developing a WebApp (SPA) without reloading the page, but for me both Vue and Vue router (?) are things I do not know enough.

So actually the navigation between pages happens with page reloading? Right?

mikkelrom commented 5 years ago

I would also love to see some documentation on the usage. Maybe you could get some inspiration from this: https://github.com/sumul/fractal-react-adapter :)