I try to integrate VueJs to Symfony 4.3.
I have installed webpack-encore, vue vue-loader vue-template-compiler and so on.
Everything shows normal.
My os is windows 10. I have installed nodejs and yarn.
Documents>node -v
v12.4.0
Documents>npm -v
6.9.0
Documents>yarn -v
1.16.0
//webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.enableVueLoader()
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
module.exports = Encore.getWebpackConfig();
//app.js
import Vue from "vue";
import App from "./components/App";
console.log('abc');
new Vue({
el: '#app',
components: { App },
})
//App.vue
<template>
<h2>Welcome to Symfony 4 and vuejs</h2>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
//index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello HomeController!{% endblock %}
{% block body %}
<div id="app">
<App> </App>
</div>
{% endblock %}
//base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<script src="{{ asset('build/app.js') }}"></script>
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
//HomeController.php
class HomeController extends AbstractController
{
/**
* @Route("/home", name="home")
* @return Response
*/
public function index()
{
return $this->render('home/index.html.twig', [
'controller_name' => 'HomeController',
]);
}
}
When I make the server run,all correct,not excetipn but noting shows.
D:\symfonyvue>npm run dev-server
> @ dev-server D:\symfonyvue
> encore dev-server
Running webpack-dev-server ...
DONE Compiled successfully in 3026ms
php bin/console server:run
[OK] Server listening on http://127.0.0.1:8001
// Quit the server with CONTROL-C.
visite the http://127.0.0.1:8000/home
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello HomeController!</title>
<script src="http://localhost:8080/build/app.js"></script>
</head>
<body>
<div id="app">
<App> </App>
</div>
