How to properly organize vue code?

Question

Vue.js

Hello. I started adding reactivity to the site on Yii2, moved most of the widgets to vue components, there are no vue-cli options, or I didn’t understand how to adapt it to MPA, so I just plug it in the code. I store component templates in x-templates, as a result, I got a mess of component code, their templates and site code, how can I put this in order, maybe there is an approach? Thanks in advance

Answer 1

I also fought with such "porridge". Nevertheless, with a complete separation of the back and front, development is more convenient, and more and more logical. Now I use quasar framework (this is also vue). Yii application works like a rest application (gives only data, processing standard requests out of the box), and the front is on quasar. Hot reload webpack and other goodies of this approach are pleasing.
Main idea: I configured the webpack config so that after the build it uploads all the code to the Yii web folder. The entry point in one view is app. It is also modified

//таким образом в app.php указываются ссылки на  сгенерированные js файлы
   afterBuild() {
        let writeableStream = fs.createWriteStream('../views/site/app.php');
    //......
        fs.createReadStream('../web/index.html').pipe(writeableStream);
      },

Accordingly, we get the usual Yii. What pleases - with this session approach, csf tokens - everything works as usual. Only for local development, when the vue application is launched through its own server (we work locally through the cli) - you have to get the csf yourself.