As I delve into the world of Vue.js, I am encountering some challenges with rendering a simple interpolation within my local development application.
The Issue
- Strangely, the Vue instance displays an HTML comment of
createElement
<body>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.26.7"></script>
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
<script src="/scripts/main.js"></script>
</body>
Upon using "step into next functional call" from new Vue(..):
https://i.sstatic.net/VPRvA.png
Main.js
- Upon observing that nunjucks was utilizing the {{ }} mustache tokens in my gulp build, I made sure to modify the delimiter in the Vue instance to << >>. This validation assured me that they appear in the .tmp folder where the app is served.
import Vue from 'vue'
var example1 = new Vue({
delimiters: ['<<', '>>'],
el: '#example-1',
data: {
items: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
}
});
HTML
<body>
<ul id="example-1">
<li v-for="item in items">
<< item.message >>
</li>
</ul>
<script src="/scripts/main.js"></script>
</body>
Gulp file
- The HTML output is generated by task
nunjucksHtml. - The JS bundles are managed by task
scripts. - There seems to be no issue with browsersync, but it stands out as one of the discrepancies between the local IIS site with static HTML and JS that functions seamlessly.
const { src, dest, watch, series, parallel } = require("gulp");
const gulpLoadPlugins = require("gulp-load-plugins");
const browserSync = require("browser-sync");
const del = require("del");
const { argv } = require("yargs");
const $ = gulpLoadPlugins();
const server = browserSync.create();
// More code for tasks is present, not displayed here
let serve = series(
clean,
parallel(nunjucksHtml, scripts),
startAppServer
);
exports.serve = serve;
Package.json (essential parts only)
{
"private": true,
"engines": {
"node": ">=4"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"browser-sync": "^2.2.1",
// Other dependencies listed here
},
}
Resolutions Attempted
- I recreated the example on CodePen and hosted it locally with IIS alongside static HTML with inline JavaScript, which operated flawlessly.