fastfony/webapp-webpack-encore-vue-sfc-pack

An other webapp pack on top of the default skeleton for compiling Vue single-file component (i.e. .vue) with Webpack Encore.

v1.0.1 2025-10-10 19:26 UTC

Requires

• fastfony/webapp-webpack-encore-pack: ^1.0
• symfony/ux-vue: ^v2.30

Conflicts

• symfony/asset-mapper: *
• symfony/framework-bundle: <6.3

MIT

• neothone

• symfony
• pack
• webpack
• vue
• webpack-encore
• ux-vue
• sfc

README

An other pack to install on top of the default Symfony skeleton. Include webpack-encore-bundle and necessary things for Vue single-file component (i.e. .vue)

It's a similar pack to symfony/webapp-pack but for persons would like to continue to use webpack and .vue files (Single-file component), instead of AssetMapper.

Installation

After creating Symfony Applications, in your project directory:

composer remove symfony/asset-mapper symfony/stimulus-bundle symfony/ux-turbo
composer require fastfony/webapp-webpack-encore-vue-sfc-pack
npm install -D vue-loader --force

Then, start your project as usual (with Symfony CLI, Docker, etc.) and don't forget to enable watch mode with npm run watch for compile assets and automatically re-compile when files change.

Keep Going!

Optional configuration

With this command you can configure webpack for silence the recommandation about "To create a smaller (and CSP-compliant) build" and for only use Vue Single-file component (see also: Runtime Compiler Build):

sed -i '' 's/\.enableVueLoader()/.enableVueLoader(() => {}, { runtimeCompilerBuild: false })/' webpack.config.js

Informations

With webpack-encore-bundle and without AssetMapper you can still use Stimulus & Symfony UX and Turbo!

You can also complete your pack with :

• fastfony/tailwind-webpack-encore-pack for requiring TailwindCSS.