How to Add Vue js 3 to Symfony 6 Part 1
In today's tutorial, we are going to see how to add Vue js 3 to Symfony 6 with Encore, so I assume that you have already installed a fresh new Symfony 6 application.
Install Encore
First, let's install Encore and the packages that we are going to need.
Run the commands below:
//first
composer require symfony/webpack-encore-bundle
//second
yarn install
//third
yarn add vue vue-loader vue-template-compiler
Enable Vue js
Next step, we need to enable Vue js, so let's update the file webpack.config.js and add this line .enableVueLoader()
// webpack.config.js
Encore
// ...
.addEntry('main', './assets/main.js')
+ .enableVueLoader()
;
Create the home component
Inside the asset folder let's create a new folder 'components' inside this folder add a new file 'Home.vue' and add the code below.
<template>
<div>
<p>Add VueJs 3 to Symfony 6</p>
</div>
</template>
Update the file app.js
Next, update the file app.js, let's import the home component and add it to the app.
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// start the Stimulus application
import './bootstrap';
import { createApp } from 'vue';
import Home from './components/Home'
const app = createApp({});
app.component('home', Home);
app.mount('#app');