CaptainJojo/App.vue

## app.js
import App from './components/App.vue';
import Vue from 'vue';
new Vue({
  el: '#app',
  render: h => h(App)
});

## App.vue
<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

## DefaultController.php
<?php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class DefaultController  extends Controller
{
    /**
     * @Route("/")
     */
    public function home()
    {
        return $this->render('home.html.twig');
    }
}

## home.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block body %}
            <div id="app">SALUT</div>
        {% endblock %}
        {% block javascripts %}
        {% endblock %}
    </body>
</html>

## Project
your-project/
├── assets/
├── bin/
│   └── console
├── config/
│   ├── bundles.php
│   ├── packages/
│   ├── routes.yaml
│   └── services.yaml
├── public/
│   └── index.php
├── src/
│   ├── ...
│   └── Kernel.php
├── templates/
├── tests/
├── translations/
├── var/
└── vendor/

## script
<script src="{{ asset('build/app.js') }}"></script>

## webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();
	import App from './components/App.vue';
	import Vue from 'vue';
	new Vue({
	el: '#app',
	render: h => h(App)
	});
	<template>
	<div id="app">
	{{ message }}
	</div>
	</template>
	<script>
	export default {
	data() {
	return {
	message: 'Hello World'
	}
	}
	}
	</script>
	<?php

	namespace App\Controller;

	use Symfony\Component\HttpFoundation\Response;
	use Symfony\Component\Routing\Annotation\Route;
	use Symfony\Bundle\FrameworkBundle\Controller\Controller;

	class DefaultController extends Controller
	{
	/**
	* @Route("/")
	*/
	public function home()
	{
	return $this->render('home.html.twig');
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>{% block title %}Welcome!{% endblock %}</title>
	{% block stylesheets %}{% endblock %}
	</head>
	<body>
	{% block body %}
	<div id="app">SALUT</div>
	{% endblock %}
	{% block javascripts %}
	{% endblock %}
	</body>
	</html>
	your-project/
	├── assets/
	├── bin/
	│ └── console
	├── config/
	│ ├── bundles.php
	│ ├── packages/
	│ ├── routes.yaml
	│ └── services.yaml
	├── public/
	│ └── index.php
	├── src/
	│ ├── ...
	│ └── Kernel.php
	├── templates/
	├── tests/
	├── translations/
	├── var/
	└── vendor/
	var Encore = require('@symfony/webpack-encore');

	Encore
	// the project directory where compiled assets will be stored
	.setOutputPath('public/build/')
	// the public path used by the web server to access the previous directory
	.setPublicPath('/build')
	.addEntry('app', './assets/js/app.js')
	.cleanupOutputBeforeBuild()
	.enableSourceMaps(!Encore.isProduction())
	.enableVueLoader()
	;

	module.exports = Encore.getWebpackConfig();