How to embed vue.js into an existing project?

Question

Vue.js

Everywhere they write that vue.js can be implemented gradually on a working site. But somehow I couldn't find anywhere how to do it correctly. Any manual or step by step on vue.js begins with the words "Let's create the first vuejs application." But I don't need an app. I need, for example, to make a form and arrange it as a component in order to place it on several pages.
So far, I'm doing this:
1) connected vue.js
2) screwed up Vue.component()
3) profit??? Of course not.
I want to split my component into several. They may have a voluminous pattern. In short, I come to the conclusion that you need to do a "single-file component". Somehow to collect them with webpack, etc. And then again "create a vuejs application"...
How to be in such a situation? What to read? How to do it step by step?

Answer 1

1. You install vue-cli (installation instructions in the documentation).
   
2. Making the right components
   
3. Building (npm run build)
   
4. You connect the assembled build.js on the desired page
   

Answer 2

If you need to use Vue for individual modules (widgets, forms, etc.), then do it like this:

import Vue from 'vue';
import VueComponent from './VueComponent.vue';

const element = document.getElementById('element');

new Vue({
  el: element,
  template: `<vue-component/>`,
  components: {
    VueComponent,
  },
});

As a result, we get a separate isolated instance of Vue with all the features of single-file components.
Of course, you need to configure the project assembly accordingly.

Answer 3

Your vision of your "problem".
1. Connect the Vue distribution on the page via CDN or locally.
2. Transfer the piece of page code that needs to be brought under the control of Vue into a separate js file.
3. Instead of this piece of code on the page, place an element with an identifier (id) - when rendering, your Vue component will fit here as a result.
4. Modify the transferred code in the js file under Vue - create a Vue component.
5. Include js-file on the page.
6. Profit.
PS
This way you can make Vue components - as many as you like.

Answer 4

In the end, you still have to redo everything completely. This is exactly what I came up with, because the approaches are too different - building a SPA project and trying to gradually implement.