Cacher is the code snippet organizer for pro developers

//assets/js/app.js

import Vue from 'vue';
 
import Example from './components/Example'
 
/**
* Create a fresh Vue Application instance
*/
new Vue({
  el: '#app',
  components: {Example}
});

// Paths for Output, public and addEntry may vary in the project's context

var Encore = require('@symfony/webpack-encore'); Encore
   .setOutputPath('public/build/')
   .setPublicPath('/build')
   .cleanupOutputBeforeBuild()
   .enableSourceMaps(!Encore.isProduction())
   .addEntry('js/app', './assets/js/app.js')
   // .addStyleEntry('css/app', './assets/css/app.scss')
   // .enableSassLoader()
   // .autoProvidejQuery()
 
 
   // Enable Vue loader
   .enableVueLoader()
;
 
module.exports = Encore.getWebpackConfig();

// Go into the web folder
cd myproject/web

yarn add --dev vue vue-loader vue-template-compiler
// We will use webpack-encore to manage the js file compilations in the Symfony environnement
yarn add @symfony/webpack-encore --dev

touch webpack.config.js

// After the configuration (the next files..), we can live compile the Vue components with:
  
yarn run encore dev --watch

// This will output a app.js file in the dist given in the config
// Just import this file a view, 
// and reference the desired component by adding an id to it as a normal Vue component,
// All the processing part is made in the app.js file and the view part is given in the view's component