Is it possible to combine single file vue components with php code?

Question

PHP

Hello, for the sake of experiment, I thought - is it possible to combine single-file components in vue.js with php code?
To make simple single-file blocks that would combine the template, styles, frontend and backend logic.

<template>
  <div>
    <input type="text" v-model="input"><button type="text" @click="submit">
  </div>
</template>

<style lang="scss" scoped>
  input {
    width: 300px;
  }
</style>

<script>
export default {
  data() {
    return {
    	input: ''
    }
  },

  methods: {
    save() {
      this.$http.post('/api/save', {id: 333, input: input})
    },
  },
}
</script>

<?php
class componentsController extends Controller {
  public function save(Request $request) {
      $test = Test::updateOrCreate( ['id' => $request->id], $request->all() );
      return response()->json($test);
  }
}
?>

The question is, how to connect this .vue component in php and ignore everything except the code between <?php ?>
so webpack should also ignore <?php ?>
Before php7 there were tags , they would probably solve the problem with webpack, but now they are gone. Again, it's not clear what to do with php? - maybe just steam everything in between and put it in eval() ? Any ideas? <script language="php"></script>
<script language="php">

Answer 1

https://vue-loader.vuejs.org/guide/custom-blocks.h...
+ write a webpack-loader that will collect all php code from all files and replace them, for example, with the url of the generated api
+ write a webpack-plugin that emit tap will throw everything collected by the loader into which php file thread for backing,
but as already mentioned above, think about whether it is worth such an effort

Answer 2

Kill it. Ru community has never been friendlier.
For example, I have not been sitting in Russian-speaking thematic chats in the cart for a long time. You won’t get sensible help, but for some non-standard experiments they will peck and stumble. The way out is to communicate in English-speaking chats. The people there are much friendlier.
I have an idea how it is possible to implement approximately what you want. I understand your idea to make the most autonomous component in the system? In general, the meaning is this - you break the component into files:
php - a file with layout. In it you call the component.
Vue - layout of the
Stul component itself, css -
Js styles - component scripts.
The question arises, why split into separate files? The answer is for uniformity. by the fact that the component may, for example, not contain vue at all.
Actually, I'm still thinking about this approach myself. But I have exactly the idea of ​​php components. If you want I can send you the code. Write me an email or a cart, I'll send you a piece of the test project)

Answer 3

Use vue.cli wc build for packages, wc-async for single components, in a result you'll get .min.js file to use in production that contains custom elements... In php loader add libraries such as vue/ vuex maybe and others that your library depends on.

Answer 4

https://laravel.com/docs/5.7/frontend

Answer 5

The main purpose of components is code reuse. The backend is fragmented for the same reason, so that chunks of code can be used. Now you can even use parts of one framework in another.
What backend can be put into such a component so that I can use it on my project? Let's take the same message sending from a landing page. The component must have a generic parameter with a route address that will destroy the framework on the server and perform some generic action to send a message. In your case, this is a call to mail (), but in the case of another person, this is either a call to the mailchimp api, or an smtp service, or even putting some command on the queue. it turns out that the maximum that you can put in such a component is a link to the sendMail () command, the body of which, for the sake of the same universality and reuse, must be written outside the component. Otherwise, you end up with a useless non-reusable component.