v-model works fine when using string templates using template: '<div>....' but doesn't work when using SFC components using <template> element. I am using a custom configuration with webpack to be able to integrate it with Django.
Webpack Config :
const path = require('path');
var webpack = require("webpack");
var BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const entries = {
home:'./main/static/main/js/pages/home.js',
offer:'./main/static/main/js/pages/offer.js',
profile:'./main/static/main/js/pages/profile.js',
request:'./main/static/main/js/pages/request.js',
navbar:'./main/static/main/js/pages/navbar.js',
}
module.exports = {
entry:entries, // path to our input file
output: {
clean: false,
filename: '[name].[contenthash].js', // output bundle file name
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, './main/static/main/builds'), // path to our Django static directory
},
resolve: {
alias: {
vue: 'vue/dist/vue.js',
'@':path.resolve(__dirname, './main/static/main/js'),
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.ENV': JSON.stringify(process.env.ENV),
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new BundleTracker({
path: __dirname,
filename: './main/static/main/builds/webpack-stats.json',
}),
new MiniCssExtractPlugin(),
new VueLoaderPlugin()
],
optimization: {
minimizer:[
new CssMinimizerPlugin(),
new TerserPlugin(),
// new CompressionPlugin()
],
minimize: true,
},
module: {
rules: [
{
test:/\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options:{
cacheDirectory: true
}
},
{
test: /\.(png|svg|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.s[ac]ss$/i,
use:[
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader'
}
],
// use: [
// {
// loader: MiniCssExtractPlugin.loader,
// },
// "style-loader",
// "css-loader",
// "sass-loader",
// "postcss-loader",
// ],
},
]
},
resolveLoader: {
modules: [
path.join(__dirname,'node_modules')
]
},
resolve: {
modules: [
path.join(__dirname, 'node_modules')
]
}
};package.json :
{
"name": "bricoram",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w --mode=development",
"build": "webpack --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@vue/compiler-sfc": "^3.2.41",
"autoprefixer": "^10.4.13",
"babel-loader": "^8.2.2",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"install": "^0.13.0",
"js-cookie": "^3.0.1",
"mini-css-extract-plugin": "^2.6.1",
"npm": "^8.5.2",
"postcss": "^8.4.7",
"postcss-loader": "^6.2.1",
"requirejs": "^2.3.6",
"sass": "^1.39.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"toastr": "^2.1.4",
"url-loader": "^4.1.1",
"v-viewer": "^3.0.11",
"vue-loader": "^17.0.0",
"vue-multiselect": "^2.1.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.13",
"vue-toast-notification": "^0.6.3",
"webpack": "^5.52.1",
"webpack-bundle-tracker": "^1.6.0",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.0.0-beta2",
"@gitlab/svgs": "^1.218.0",
"@popperjs/core": "^2.11.6",
"@sentry/browser": "^6.18.2",
"@sentry/tracing": "^6.18.2",
"@tarekraafat/autocomplete.js": "^10.2.7",
"axios": "^0.27.2",
"bootstrap": "^5.2.2",
"compression-webpack-plugin": "^10.0.0",
"css-minimizer-webpack-plugin": "^4.2.2",
"glob": "^8.0.3",
"jquery": "^3.6.0",
"jquery-ui": "^1.13.0",
"jquery-ui-bundle": "^1.12.1-migrate",
"just-detect-adblock": "^1.1.0",
"moment": "^2.29.1",
"pikaday": "^1.8.2",
"terser-webpack-plugin": "^5.3.6",
"viewerjs": "^1.10.1",
"vue": "^3.2.41",
"vue-template-loader": "^1.1.0",
"vue3-sfc-loader": "^0.8.4",
"webpack-jquery-ui": "^2.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}