adinan-cenci/App.vue

## _README.md

      
    Raw
  

              _README.md
            
          
    Vue 3 + Gulp + Webpack

A little template I keep around.
A small setup for Vue JS development with webpack and gulp.
To compile install the dependencies with npm i or yarn install

and then compile with gulp.

  
## App.vue
<script>
export default {
    data() {
        return {
            theTruth: 'Vue used to be way easier to get into, now it is as complicated as other garbage like angular and react',
        }
    },
}
</script>

<template>
    <div class="about-vue">
        <h1>
            About Vue.js
        </h1>
        <p>
            {{ theTruth }}
        </p>
    </div>
</template>

<style>
.about-vue p {
    text-decoration: underline;
}
</style>

## gulpfile.js
const gulp                = require('gulp');
const rename              = require('gulp-rename');
const webpack             = require('webpack');
const webpackStream       = require('webpack-stream');
const { VueLoaderPlugin } = require('vue-loader');

async function build()
{
    return gulp.src('./main.js')
    .pipe(webpackStream({
        mode: 'development',

        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },

                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ]
                },

            ]
        },

        plugins: [
            new VueLoaderPlugin(),

            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: true,
                __VUE_PROD_DEVTOOLS__: true
            })
        ]
    }))
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('./'));
}

exports.build = build;
exports.default = gulp.series(build);

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="bundle.js"></script>
        <title>Document</title>
    </head>
    <body id="app">
    </body>
</html>

## main.js
import { createApp } from 'vue';
import App from './App.vue';

//----------------------------------------

const app = createApp(App);

//----------------------------------------

document.addEventListener('DOMContentLoaded', () =>
{
    app.mount('#app');
});

## package.json
{
    "name": "vue3-webpack-gulp-template",
    "version": "0.0.0",
    "description": "A minimal template to compile vue with webpack and gulp",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Adinan Cenci",
    "license": "ISC",
    "dependencies": {
        "vue": "^3.2.47"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.2.47",
        "css-loader": "^6.7.3",
        "gulp": "^4.0.2",
        "gulp-rename": "^2.0.0",
        "vue-loader": "^17.0.1",
        "vue-style-loader": "^4.1.3",
        "webpack": "^5.64.1",
        "webpack-stream": "^7.0.0"
    }
}
	<script>
	export default {
	data() {
	return {
	theTruth: 'Vue used to be way easier to get into, now it is as complicated as other garbage like angular and react',
	}
	},
	}
	</script>

	<template>
	<div class="about-vue">
	<h1>
	About Vue.js
	</h1>
	<p>
	{{ theTruth }}
	</p>
	</div>
	</template>

	<style>
	.about-vue p {
	text-decoration: underline;
	}
	</style>
	const gulp = require('gulp');
	const rename = require('gulp-rename');
	const webpack = require('webpack');
	const webpackStream = require('webpack-stream');
	const { VueLoaderPlugin } = require('vue-loader');

	async function build()
	{
	return gulp.src('./main.js')
	.pipe(webpackStream({
	mode: 'development',

	module: {
	rules: [
	{
	test: /\.vue$/,
	loader: 'vue-loader'
	},

	{
	test: /\.css$/,
	use: [
	'vue-style-loader',
	'css-loader'
	]
	},

	]
	},

	plugins: [
	new VueLoaderPlugin(),

	new webpack.DefinePlugin({
	__VUE_OPTIONS_API__: true,
	__VUE_PROD_DEVTOOLS__: true
	})
	]
	}))
	.pipe(rename('bundle.js'))
	.pipe(gulp.dest('./'));
	}

	exports.build = build;
	exports.default = gulp.series(build);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="bundle.js"></script>
	<title>Document</title>
	</head>
	<body id="app">
	</body>
	</html>
	import { createApp } from 'vue';
	import App from './App.vue';

	//----------------------------------------

	const app = createApp(App);

	//----------------------------------------

	document.addEventListener('DOMContentLoaded', () =>
	{
	app.mount('#app');
	});
	{
	"name": "vue3-webpack-gulp-template",
	"version": "0.0.0",
	"description": "A minimal template to compile vue with webpack and gulp",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Adinan Cenci",
	"license": "ISC",
	"dependencies": {
	"vue": "^3.2.47"
	},
	"devDependencies": {
	"@vue/compiler-sfc": "^3.2.47",
	"css-loader": "^6.7.3",
	"gulp": "^4.0.2",
	"gulp-rename": "^2.0.0",
	"vue-loader": "^17.0.1",
	"vue-style-loader": "^4.1.3",
	"webpack": "^5.64.1",
	"webpack-stream": "^7.0.0"
	}
	}