Commit cbaef4fe authored by Johan Vervloet's avatar Johan Vervloet

Use a vue single file component, #1.

parent 21d50c22
Pipeline #68619998 failed with stages
in 2 minutes and 15 seconds
/.idea
/vendor
/node_modules
/public/build
// assets/js/app.js
import Vue from 'vue';
import Hello from './components/Hello'
/**
* Create a fresh Vue Application instance
*/
new Vue({
el: '#app',
// render: h => h(Hello)
components: {Hello}
});
<template>
<div>
Say hello to:
<input type="text" id="itemInput" v-model="newItem" />
<input type="button" value="Go" v-on:click="addToList"/>
<ul>
<li v-for="item in helloList">Hello <span v-text="item"></span>!</li>
</ul>
</div>
</template>
<script>
console.log('Hello component!');
module.exports = {
data: function() {
return {
newItem: null,
helloList: []
};
},
methods: {
addToList: function() {
this.helloList.push(this.newItem);
}
},
}
</script>
......@@ -3,32 +3,18 @@
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Say hello to:
<input type="text" id="itemInput" v-model="newItem" />
<input type="button" value="Go" v-on:click="addToList"/>
<ul>
<li v-for="item in helloList">Hello <span v-text="item"></span>!</li>
</ul>
<hello></hello>
</div>
<script type="text/javascript">
var helloComponent = new Vue({
el: '#app',
data: {
newItem: null,
helloList: []
},
methods: {
addToList: function() {
this.helloList.push(this.newItem);
}
}
});
</script>
<!-- It doesn't seem to work with the scripts in the head section. -->
<script src="build/runtime.js"></script>
<script src="build/vendors~app.js"></script>
<script src="build/app.js"></script>
</body>
</html>
var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// Enable Vue loader
.enableVueLoader()
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment