I can access the relevant property values from application.properties when browsing to the application on http://localhost:8081, but not using the webpack devserver via http://localhost:9090.
webpack.dev.js (devserver)
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/main/resources/templates/index.html',
title: 'Example Application'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
.
.
mode: 'development',
devServer: {
historyApiFallback: true,
hot: true,
port: 9090,
proxy: {
'/': {
target: 'http://localhost:8081',
secure: false,
prependPath: false
}
},
publicPath: 'http://localhost:9090/'
},
devtool: 'inline-source-map',
});
index.html
<html>
<head>
.
.
<script th:inline="javascript">
var SERVICES_URL = [[${servicesUrl}]];
var MAPS_URL = [[${mapsUrl}]];
</script>
</head>
<body>
<div id="react"></div>
<script src="/bundle.js"></script>
</body>
</html>
application.properties
services.url=https://example1.com
maps.url=https://example2.com
When accessing the variable SERVICES_URL in any javascript file while using the webpack devserver, I get the following error because the variable is not getting assigned the value by Thymeleaf.
SyntaxError: missing ] after element list
I assume that it doesn't work on the webpack devserver because its only serving up the frontend code vs the embedded tomcat server, which is serving the server-side code as well.
The solution to this problem is to remove the HtmlWebpackPlugin from the webpack configuration file so that the index is not loaded from the resources file but from the response after Thymeleaf has done its thing.
plugins: [
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({
// template: 'src/main/resources/templates/index.html',
// title: 'Example Application'
// }),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
Related
My component where I want to route to Laravel Notice the question in the href in the script: The idea is actually to return me from the Vue component to a Laravel view. I have realized that vue router allows me to go perfectly from one vue component to another vue component and what I need is to go from a link in a vue component to a laravel view that belongs to a web route
<template>
<div>
<v-breadcrumbs
:items="items"
divider="."
></v-breadcrumbs>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{
text: 'Dashboard',
disabled: false,
href: 'how do i add a laravel web route here?',
},
{
text: 'Link 1',
disabled: false,
href: 'breadcrumbs_link_1',
},
{
text: 'Link 2',
disabled: true,
href: 'breadcrumbs_link_2',
},
],
}),
}
</script>
I try to change the structure of my .vue files (used with laravel) from the working version as seen here:
OLD foo-component.vue:
<script>
Vue.component("foo-component", {
data() {
},
props: {
},
methods: {
},
template: `
<div> Some Content Here </div>
`
});
</script>
switch this to the other structure for .vue files:
NEW: foo-component.vue:
<template>
<div> Some Content Here </div>
</template>
<script>
export default {
name: 'foo-component',
data() {
},
props: {
},
methods: {
},
}
</script>
OLD: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
NEW: main app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
const app = new Vue({
el: '#app',
components: {
OtherComponents
},
data:{
},
methods: {
}
});
But with that I get an error in the browser saying:
[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I then added 'foo-component' to the components: {OtherComponents, foo-component} but then things got messy and the browser is saying:
Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)
What am I doing wrong?
Here's the HTML/View where I call the foo-component inside the laravel blade home.blade.php:
<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<foo-component></foo-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
You have to register your components in app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
The way I got it working is an update to app.js:
Vue.component('foo-component', require('./components/foo-component.vue').default);
import FooComponent from './components/foo-component.vue';
const app = new Vue({
el: '#app',
components: {
OtherComponents,
'foo-component': FooComponent
},
data:{
},
methods: {
}
});
I'm using laravel-vue-i18n-generator package to handle text translation in vuejs component in my laravel project. I've set up app.js like below:
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const lang = 'fa';
const i18n = new VueInternationalization({
locale: lang,
messages: Locale
});
const app = new Vue({
el: '#app',
i18n,
});
And in component:
<template>
<a href="#" class="tip" title="" :title="$t('component.delete.title')" #click.prevent="deleteAction">
<i :class="icon"></i>
</a>
</template>
<script>
import swal from 'sweetalert';
import axios from 'axios';
export default {
inject: ['$i18n'],
props:{
endpoint: {
type: String,
required: true,
},
icon: {
type: String,
default: 'fa fa-trash'
},
message: {
type: String,
default: this.$i18n.t('component.delete.are_you_sure'),
},
confirm: {
type: String,
default: this.$i18n.t('component.delete.confirm'),
},
cancel: {
type: String,
default: this.$i18n.t('component.delete.cancel'),
},
success: {
type: String,
default: this.$i18n.t('component.delete.success'),
},
failed: {
type: String,
default: this.$i18n.t('component.delete.failed'),
},
},
mounted() {
console.log(this);
},
methods:{
deleteAction(){
const vm = this;
swal({
text: this.message,
buttons: {
catch: {
text: this.confirm,
value: "delete",
},
cancel: this.cancel
},
dangerMode: true
}).then(name => {
if (!name) return false;
axios.delete(vm.endpoint)
.then(function (response) {
swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() => {
location.reload();
});
})
.catch(function (error) {
swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
});
});
}
}
}
</script>
<style scoped>
</style>
Fortunately $t('component.delete.title') works correctly on template part, but in script part, I've got this error:
Uncaught TypeError: Cannot read property 't' of undefined
Where do I go wrong?
This worked for me inside the script part of a component:
this.$t('message')
In vue.js if you get an error like
"_vm.translate is not a function"
It is most probably that you havent import the i18n package which contains translate method.This error occures sometimes when you try to add translate using v-bind to html attributes. Example:
<a-form-item class="mb-0" :label="`${translate('person_name.firstname')}`">
following steps can solve the error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import { translate, i18n } from '#/i18n';
#Component({
components: {
AgIconBase
},
methods:{
translate
}
})
</script>
This works for me.
I have a locales folder with index.js importing the two language files im using,
in this file add.
global.$t = Vue.t
Referred to in the script part directly as
return $t('backend.faq.main')
I build a angular2 webpack app.
put a image in the 'src/assets/images/default.png'
and in webpack.common.js:
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
{ test: /\.(jpg|png|gif)$/, loader: 'file' },
new AssetsPlugin({
path: helpers.root('dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
when i include in template like this :
<img [src]="path" width="160" height="200" />
this.path='assets/images/default.png';
the image not loaded .
This worked for me using file-loader (npm install file-loader --save-dev) ...
in webpack.common.js
module: {
loaders: [
...
{
test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot|ico)$/,
loaders: ['file-loader?name=assets/[name].[hash].[ext]']
},
...
]
}
This still does not make background in "style=" attributes work however, which is probably a good thing for best practice.
I'm trying to learn the new MVC architecture that ExtJS 4 is using and I'm having some serious issues. Here's what I get when I load the page (Chrome JS console):
ext-all-debug.js:3713[Ext.Loader] Synchronously loading 'Exercise.controller.Users'; consider adding Ext.require('Exercise.controller.Users') above Ext.onReady
ext-all-debug.js:4757An uncaught error was raised with the following data:
ext-all-debug.js:4758
Object
ext-all-debug.js:4764Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Exercise.controller.Users
ext-all-debug.js:4771Uncaught Error
And here's a breakdown of my code:
index.php
<html>
<head>
<title></title>
<style>
#import url('libraries/extjs/resources/css/ext-all.css');
</style>
<script src = "libraries/extjs/bootstrap.js"></script>
<!--
<script src = "public/app/controller/Users.js"></script>
-->
<script src = "public/app/app.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
Now, I know that the included controller script is commented out. When I explicitly include the controller this message goes away. The reason I am asking about this is because I thought Ext.loader was supposed to take care of loading the required files for me.
The Users Controller
Ext.define('Exercise.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
The Users Model
Ext.define('Exercise.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'created_at',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}, {
name: 'member_id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
}, {
name: 'last_name',
type: 'string'
}, {
name: 'password',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'email_address',
type: 'string'
}, {
name: 'is_active',
type: 'int'
}],
proxy: {
type: 'ajax',
format: 'json',
url: '../../_dev/json_fixtures/users.json',
reader: {
type: 'json',
root: 'users'
},
root: 'users'
}
});
The User View
Exercise.views.user.list = Ext.extend(Ext.grid.Panel, {
store: Exercise.stores.users,
renderTo: Ext.getBody(),
columns:[{
header: 'Member ID',
dataIndex: 'member_id'
}, {
header: 'First Name',
dataIndex: 'first_name'
}, {
header: 'Last Name',
dataIndex: 'last_name'
}],
initComponent: function() {
Exercise.stores.users.load();
Exercise.views.UsersList.superclass.initComponent.apply(this, arguments);
}
});
The app.js File
Ext.application({
name: 'Exercise',
autoCreateViewport: true,
appFolder: 'app',
controllers: [
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Side note: I've tried the solution found here to no avail and I've tried setting my apps appFolder property to both ../app and just app.
Thanks for the help with this.
have you read my question ?? how to make a "MVC Application" with extjs 4.0 beta 3?.. (it should works with final release )
it's because Ext.Loader is disabled by default...
Ext.Loader.setConfig({enabled:true});
I got that error, too. The Ext 4.0 MVC system doesn't use bootstrap.js -- instead, use ext-debug.js. When you're ready to go to production you'll replace ext-debug.js during the compilation phase.
Your HTML file should look like this:
<html>
<head>
<title></title>
<style>
#import url('libraries/extjs/resources/css/ext-all.css');
</style>
<!-- The MVC system needs ext-debug.js, not bootstrap.js -->
<script src = "libraries/extjs/ext-debug.js"></script>
<script src = "public/app/app.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>