One quick question regarding ol-Cesium. I'm trying to integrate ol-Cesium into my Vue - Openlayers app. But I'm getting this type of error:
"ReferenceError: Cesium is not defined"
Basically what I'm trying is to activate 3d functionality on click but I'm stuck with error above.
I literally used code provided in examples
import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: this.$store.getters.olMap});
ol3d.setEnabled(true);
I'm using OpenLayers v 5.3.0
Ok, I've figured it out. I only needed to add script tag inside an index.html file that points to Cesium build
Example below:
<!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">
<meta name="Vue-OpenLayers" content="Author: Agrivi d.o.o.; Wraping OpenLayers inside Vue.js">
<link rel="icon" href="<%= BASE_URL %>agrivi.ico">
<title>Agrivi Maps</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js" charset="UTF-8"></script>
</head>
<body>
<noscript>
<strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Hope it will help someone :)
The error is indicating it's a webpack error.
I'm referencing documentation found here: https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js
Make sure you've installed Cesium through NPM:
npm i --save-dev cesium olcs copy-webpack-plugin
Then, in your webpack.config.js file, add these lines:
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');
And in the configuration object of this file, add these lines:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: 'empty'
},
Then, add Cesium alias to this file:
resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource)
}
},
Then, add this to plugins in this file:
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],
Related
Problem: Images are not showing in Lumen-vue project.
This question may seems a bit long. But I tried to make it visual easily.
In my lumen(8.3.4) server, I'm using a standalone vue frontend, and delivering the compiled css & js in public/frontend folder. Here is my folder structure
As you can see the vue app is inside the frontend folder my vue.config.js setting is as following:
const path = require("path");
const chunkPrefix = '[name]'
module.exports = {
filenameHashing: false,
outputDir: path.resolve(__dirname, "../public/frontend"),
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {name: `${chunkPrefix}.[ext]`}));
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
css: {
extract: {
filename: `css/${chunkPrefix}.css`,
chunkFilename: `css/${chunkPrefix}.css`,
},
},
configureWebpack: {
output: {
filename: `js/${chunkPrefix}.js`,
chunkFilename: `js/${chunkPrefix}.js`,
}
},
}
this delivering the compiled js & css after npm run build in public folder as per following
my app.blade.php is
<head>
<link rel="stylesheet" href="{{url('frontend/css/app.css')}}">
<link rel="stylesheet" href="{{url('frontend/css/chunk-vendors.css')}}">
</head>
<body>
<div>
<div id="app"></div>
</div>
<script type="text/javascript" src="{{url('frontend/js/chunk-vendors.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/app.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/0.js')}}"></script>
</body>
Now the problem is after loading the page is browswer, some images are not loading
This is how the inspect showing in case of failed picture
<img src="/img/profile02.png" alt="profile picture" class="img">
and the working one is
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU==" alt="whatsapp icon"">
My vue asset handing is as following.
Can't figure out why some images are not loading.
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<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">
<title><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I have a project directory with just three files:
test-proj/
hello.js
index.html
jsconfig.json
Where hello.js looks like this:
const a = jQuery('<div>');
const b = React.Component;
const c = Vue({ el: '#app' });
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./hello.js"></script>
</body>
</html>
jsconfig.json:
{
"compilerOptions": {
"checkJs": true
}
}
When I open the test-proj directory and open hello.js, VS Code's type checker reports three errors:
Now, I modified jsconfig.json so that VS Code will automatically acquire types for all three:
{
"compilerOptions": {
"checkJs": true
},
"typeAcquisition": {
"include": [
"jquery",
"react",
"vue"
]
}
}
...which makes VS Code recognize that jQuery and React can be used in my script. However, as you see here, it still does not recognize Vue:
TLDR: Why does VS Code fail to acquire type definitions for Vue, when it can do so for React and jQuery?
(Note: This is not a Node.js project. I do not have package.json or node_modules/ under my project directory. I also checked my globally installed npm packages, just to be sure, but I do not have react or jquery installed.)
I examined the Automatic Type Acquisition cache in my PC, which is C:\Users\<username>\AppData\Local\Microsoft\TypeScript\3.8\
The immediate cause seems to be a missing entry in C:\Users\<username>\AppData\Local\Microsoft\TypeScript\3.8\node_modules\types-registry\index.json. It's a ~560KB JSON file which contains the latest version numbers for various NPM packages under the #types scope.
For some reason, this JSON file does not contain an entry for vue, even though the #types/vue package exists on NPM. Strangely enough, it does contain entries for several packages that depend on Vue, such as vue-markdown and vue-ls.
When I added "vue-ls" to my jsconfig.json:
{
"compilerOptions": {
"checkJs": true
},
"typeAcquisition": {
"include": [
"jquery",
"react",
"vue-ls"
]
}
}
...TypeScript downloaded #types/vue-ls into its cache. This pulls in the type definitions in the vue package, which makes the type checks work for Vue.js.
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!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, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
I am experimenting with cycle.js and webpack. I have got the following index.js file which almost a copy of what I found on cycle.js documentation.
import Cycle from '#cycle/core';
import {makeDOMDriver, hJSX} from '#cycle/dom';
function main(drivers) {
return {
DOM: drivers.DOM.select('input').events('click')
.map(ev => ev.target.checked)
.startWith(false)
.map(toggled =>
<div>
<input type="checkbox" /> Toggle me
<p>{toggled ? 'ON' : 'off'}</p>
</div>
)
};
}
const drivers = {
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
And here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycle.js checkbox</title>
</head>
<body>
<div id="app"></div> <!-- Our container -->
<script src="./dist/bundle.js"></script>
</body>
</html>
I am using webpack to generate bundle.js inside dist folder. When I run the app by opening index.html in chrome, I get following error in chrome console
cycle.js:51ReferenceError: React is not defined
at index.js:10
at tryCatcher (rx.all.js:63)
at InnerObserver.next (rx.all.js:5598)
at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at InnerObserver.tryCatcher (rx.all.js:63)
at AutoDetachObserverPrototype.next (rx.all.js:11810)
at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at ConcatObserver.next (rx.all.js:3466)
at ConcatObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
at ConcatObserver.tryCatcher (rx.all.js:63)
Not sure what I am doing wrong in this seemingly simple first step in a cycle.js app.
You need to set the correct pragma for JSX, or the JSX will be transformed incorrectly.
You can add the correct pragma to the top of your .js file:
/** #jsx hJSX */
Or put this in your babel configuration:
[ "transform-react-jsx", { "pragma": "hJSX" } ]
Relevant GitHub thread.