🇳🇬Nigeria @almaudoh

Thanks @freelock for your response. As it happens, I used more or less the same approaches as you did.

1. Used .vue files compiled with webpack / uglify using Vue CLI. However, you've asked pertinent questions. Ideally, IMHO a better approach would be to compile each .vue component to a separate Drupal 8 library. Figuring out how to do that is an interesting experiment I want to do. In addition, it would be nice to still have Vue loaded separately rather than compiled in.
2. One way to solve this is to provide Vue components that map to given Drupal render and form elements as well as theme functions. The twig variables that are supplied to these can then be supplied as props to the Vue components. This will allow reactivity to be achieved by updating the props. I have started work on a new Drupal module Vue Elements → that hopes to achieve that.
3. I agree on this that JSONAPI and GraphQL are the most likely approaches to use for connecting with the back end.
4. +1

I think what we really need here is to build a framework that allows a PHP or JS developer to easily integrate Vue.js into an existing Drupal site or module.
I have done a couple of experiments using Vue to connect to an existing Drupal module to provide reactive functionality. Some of the choices I had to make:

1. Do I use .vue component files (which would require compilation) or do I use plain .js files with twig-rendered template files? Because of Drupal's libraries system and twig, it is seamless to just build a .js file and use Drupal's libraries system to manage the dependencies. But the convenience of seeing templates, js and css in the same file is lost.
2. Using .vue files meant that I had to duplicate the templates in .html.twig files into the <template> section of the .vue files. Essentially, all twig templates would need to be rewritten as Vue.js templates with reactive variables embedded.
3. Do I write new controllers to handle the Ajax endpoints that Vue needs to communicate with the back end? Or do I try to modify the existing controllers that were designed for existing functionality?
4. Do I use a node.js backend with server-side rendering? Or do I use a direct connection to Drupal API's?

Fortunately, Drupal 8 now has a maturing REST API with potentially JSON API module also going into core soon, so there can be some agreement on best approaches to entity CRUD.
The one area that is still very challenging to deal with is Drupal's Form API especially the Ajax aspect of it.

It would be interesting to see and hear how others are dealing with these types of issues.

I guess, what I'm saying here is that all of us who have shown interest and done something with Vue in Drupal should share experiences and ideas and come up with something to build upon.

To get this kickstarted, I have create a new #vue channel on Drupal Slack. All those interested can join and share.

We may have to raise a couple of issues to discuss and agree on the best approaches to solve some of the questions raised.

In addition, I think we should also have a Community Initiative around this, since a greater proportion of the Drupal community favors Vue over React.

almaudoh → created an issue. See original summary → .