I try to add custom template to my Laravel 8 / vuejs3 / inertia-vue3 app, but looking at code of vuejs templates
I see a lot of faker code, like
<div
v-for="(faker, fakerKey) in $_.take($f(), 4)"
:key="fakerKey"
class="intro-y"
>
<div class="box px-4 py-4 mb-3 flex items-center zoom-in">
...
</div>
</div>
I found file resources/app/utils/faker.js with content :
const fakers = {
fakeUsers() {
const users = [
{ name: 'Johnny Depp', gender: 'male' },
...
fakeProducts() {
const products = [
{ name: 'Dell XPS 13', category: 'PC & Laptop' },
...
In my vue file I imported utils :
import faker from '#/utils/faker'
export default defineComponent({
components: {
...
faker,
},
But in browser's console I see error :
app.js:10219 [Vue warn]: Property "$_" was accessed during render but is not defined on instance.
Did I miss some declarations ?
In package.json :
"devDependencies": {
"#inertiajs/inertia": "^0.10.0",
"#inertiajs/inertia-vue3": "^0.5.1",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.4.0",
"#tailwindcss/typography": "^0.5.0",
"#vue/compiler-sfc": "^3.0.5",
"postcss": "8.3.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^4.1.0",
"sass": "^1.46.0",
"sass-loader": "^12.4.0",
"tailwindcss": "^2.2.19",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
...
},
Thanks in advance!
Related
I am trying to integrate ag-grid into my existing vue.js project. The table is not rendering properly. I followed the tutorial on ag-grid here website.
<template>
<v-container>
<v-row>
<v-col cols="12" sm="3"></v-col>
<v-col cols="12" sm="6">
<ag-grid-vue
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
:modules="modules"
>
</ag-grid-vue>
</v-col>
<v-col cols="12" sm="3"></v-col>
</v-row>
</v-container>
</template>
<script>
import { AgGridVue } from "#ag-grid-community/vue";
import { ClientSideRowModelModule } from "#ag-grid-community/client-side-row-model";
export default {
name: "VueGridTest",
data() {
return {
columnDefs: null,
rowData: null,
modules: [ClientSideRowModelModule],
};
},
components: {
AgGridVue,
},
beforeMount() {
this.columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" },
];
this.rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
];
},
};
</script>
Results look like:
If I fix the height of the table div to any number it renders.
Project Configuration:
"#ag-grid-community/all-modules": "^24.0.0",
"#ag-grid-community/client-side-row-model": "^24.0.0",
"#ag-grid-community/core": "^24.0.0",
"#ag-grid-community/csv-export": "^24.0.0",
"#ag-grid-community/infinite-row-model": "^24.0.0",
"#ag-grid-community/vue": "^24.0.0",
"#ag-grid-enterprise/all-modules": "^24.0.0",
"#ag-grid-enterprise/server-side-row-model": "^24.0.0",
"vue": "^2.6.12",
"vue-class-component": "^7.2.5",
"vue-property-decorator": "^9.0.0",
Also there are no errors in the console.
I am new to ag-grid and ag-grid-vue
What you may want to do is to set domLayout="autoHeight" as stated in the docs. So in your code:
<ag-grid-vue
class="ag-theme-alpine"
domLayout="autoHeight"
...
></ag-grid-vue>
Live Demo
Based on the following tutorial:
https://youtu.be/4deVCNJq3qc?t=7710
Question> I am able to show the table as expected. However, the table column name doesn't show a hyper-link. What should I do to fix the issue?
Thank you
"dependencies": {
"bootstrap-vue": "^2.11.0",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
},
<template>
<div>
<h1>Cats for Adoption</h1>
<b-table striped hover :items="cats">
<template slot="name" slot-scope="data">
<router-link :to="`/pets/${data.value}`">{{ data.value }}</router-link>
</template>
</b-table>
</div>
</template>
<script>
import cats from "#/data/cats";
export default {
data() {
return { cats: cats };
}
};
</script>
# /data/cats.js
export default [
{
name: "Fish",
breed: "tuxedo",
species: "cat",
gender: "male",
age: 20,
color: "black/white",
weight: 13,
location: "fourside",
notes: "Sweet kitty. He loves getting his belly rubbed."
}
];
Bootstrap-Vue appears to have changed the way you do custom data rendering. Your template should be:
<b-table striped hover :items="cats">
<template v-slot:cell(name)="data">
<router-link :to="`/pets/${data.value}`">{{ data.value }}</router-link>
</template>
</b-table>
CodeSandbox demo
environment
dotnet core 2.1.0
"bootstrap-vue": "^2.0.0-rc.11",
"nuxt": "^1.4.1",
"vue": "^2.5.16",
"vue-axios": "^2.1.1",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.5.16",
"vue-toasted": "^1.1.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^4.0.1"
I can't figure out how to get a simple bootstrap-vue modal working. The modal-sample component renders, with the button visible, but when the button is clicked nothing happens (modal doesn't "show").
However, in the vue dev tools, I can see the show event was emitted. Also, if I copy and paste the code in the bootstrap-vue playground it works, so it has to be my set up. Not sure if it matters but it's also running in a dotnet core environment.
webpack.config
const VueLoaderPlugin = require('vue-loader/lib/plugin');
...
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue',
...
}
...
,
module: {
rules: [
{ test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
{ test: /\.js$/,
include: [/ClientApp/,
require.resolve("bootstrap-vue")],
use: 'babel-loader' },
{ test: /\.css$/,
use: isDevBuild ? ['vue-style-loader', 'style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/,
use: 'url-loader?limit=25000' }
]
},
plugins: [
new VueLoaderPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin({use: 'site.css', fallback: 'vue-style-loader'})
])
}];
app-root.vue
import Swapshift from './modal-sample'
Vue.component('modal-sample', Swapshift);
modal-sample.vue
<template>
<div style="margin-top: 20px; padding: 10px;">
<b-button variant="primary" v-b-modal.newSwapShiftModal>New Swap Shift</b-button>
<b-modal id="newSwapShiftModal" title="New Swap Edit" >
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
</b-modal>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import bModal from 'bootstrap-vue/es/components/modal/modal'
import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'
export default {
components: { bModal },
directives: { bModalDirective },
data() {
return {
swapshift: {
id: 1,
status: {
id: 1,
description: 'Requested'
}
}
}
},
computed: {
},
methods: {
},
async created() {
console.log('...in modal-sample1');
}
}
</script>
HTML attributes all get translated to lowercase. This includes parts of the directive attribute on your button. So what is happening is that when the v-b-modal directive receives the modifiers (ie. .newSwapShiftModal), it receives newswapshiftsodal from the browser (all attributes are always lowercased by the browser).
So you need to set the id on the modal to also be lowercase (as attribute values inside quotes retain their case).
<template>
<div style="margin-top: 20px; padding: 10px;">
<b-button variant="primary" v-b-modal.new-swap-shift-modal>New Swap Shift</b-button>
<b-modal id="new-swap-shift-modal" title="New Swap Edit" >
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
</b-modal>
</div>
</template>
Example fiddle showing case sensitivity issues with IDs: https://jsfiddle.net/4cnk28yw/
EDIT: also register the directive with the correct name (as mentioned by #ittus):
import { mapActions, mapState } from 'vuex'
import { BModal, VBModal } from 'bootstrap-vue'
export default {
components: { BModal },
directives: { 'b-modal': VBModal },
// ...
}
Directive name should be b-modal. You should try changing:
directives: {
'b-modal': bModalDirective
}
I am trying to call a component method from inside a Kendo-UI grid column template, but I am getting a reference error. The problem is I have some global text formatting functions that I would like to share as a mixin. Is there anyway to call a vue component method from inside a grid col template?
<template>
<div>
<kendo-datasource ref="emailAccountDS"
:transport-read-url="'api/EmailAccounts'"
:transport-read-data-type="'json'"
:transport-read-type="'get'"
:type="'aspnetmvc-ajax'"
:schema-data="'data'"
:schema-total="schemaTotal"
:schema-model-id="'id'"
:schema-model-fields="schemaModelFields"
:server-paging= "true"
:server-sorting="true"
:server-filtering="true"
:page-size="25"
>
</kendo-datasource>
<kendo-grid :data-source-ref="'emailAccountDS'"
:pageable-always-visible="false"
:pageable-refresh="true"
:selectable="'row'"
:sortable="true"
:filterable="true"
:auto-bind="true"
:editable="'popup'"
:toolbar="['create','edit']">
<kendo-grid-column field="hostName" title="Host Name"></kendo-grid-column>
<!-- ReferenceError: testMethod is not defined -->
<kendo-grid-column field="accountType" title="Account Type" template="# testMethod(accountType) #"></kendo-grid-column>
<kendo-grid-column field="port" ></kendo-grid-column>
<kendo-grid-column field="useSsl"></kendo-grid-column>
<kendo-grid-column field="username"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name: 'EmailAccounts',
data: function () {
return {
schemaModelFields: {
id: { type: 'number', editable: false, nullable: true },
isEnabled: { type: 'boolean', defaultValue: true, validation: { required: true } },
hostName: { type: 'string', validation: { required: true } },
port: { type: 'number', defaultValue: 995, validation: { required: true } },
useSsl: { type: 'boolean', defaultValue: true, validation: { required: true } },
username: { type: 'string', validation: { required: true } }
}
}
},
methods: {
testMethod(accountType) {//<=== ReferenceError: testMethod is not defined
return "foo";
},
schemaTotal: function (response) {
return response.total;
}
}
};
</script>
<style>
</style>
I have setup a plunker here that shows the same error.
I found this thread that said this should be working since 2018.1. This is version of kendo-ui I am running.
"dependencies": {
"#progress/kendo-datasource-vue-wrapper": "^2018.2.516",
"#progress/kendo-grid-vue-wrapper": "^2018.2.516",
"#progress/kendo-layout-vue-wrapper": "^2018.2.516",
"#progress/kendo-theme-default": "^2.53.1",
"#progress/kendo-treeview-vue-wrapper": "^2018.2.516",
"#progress/kendo-ui": "^2018.2.516",
"axios": "^0.18.0",
"element-ui": "^2.3.3",
"jquery": "^2.2.4",
"popper.js": "^1.13.0",
"vue": "^2.5.11",
"vue-awesome": "^2.3.5",
"vue-router": "^3.0.1",
"webpack-hot-middleware": "2.21.2"
},
Problem is that kendo template (with "# something #") "compiles" inside kendo code and there is no reference to your Vue app.
But in jquery-kendo docs I found that you can pass function to template. As I can see in kendo source code template function always should return not null/undefined value. So I added changes below and it works like a charm:
Changes in Vue template(bind template attr to function) <kendo-grid-column field="UnitsInStock" title="Units In Stock" :template="isInStock" :width="120"></kendo-grid-column>
Changes in Vue component code (slightly changed isInStock method to expect current data item object as in docs and made it always returns value):
isInStock: function(dataItem){
if(dataItem.UnitsInStock < 0 || !dataItem.UnitsInStock){
return "Out of stock";
}
return dataItem.UnitsInStock;
}
I use render function like this:
.script.js:
methods: {
handleClick(data){
console.log(data)
},
render(h, { node, data, store }) {
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<a href="javascript:;"
:attr="data.id" #click="handleClick">Edit{data.id}
</a>
</span>
</span>
);
}
}
But babel encoutners error saying the :click has Unexpected token.
.vue:
<template src="./template.html"></template>
<script src="./script.js"></script>
package.json:
"vue": "^2.2.6"
"vue-router": "^2.4.0"
"element-ui": "^1.2.8",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"vue-loader": "^11.3.4",
"webpack": "^2.3.1",
webpack:
{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}
.babelrc:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
When i run gulp dist, babel throws an error like follows:
Namespaced tags/attributes are not supported. JSX is not XML.\nFor attributes like xlink:href, use xlinkHref instead.
As #Bert Evans suggested,
after re-reading the reademe docs of https://github.com/vuejs/babel-plugin-transform-vue-jsx, I figured out that i just wrote the code without understanding the syntax of vue-specific jsx syntax.
As the docs says:
Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show, which can be used with the v-show={value} syntax. In most cases there are obvious programmatic equivalents, for example v-if is just a ternary expression, and v-for is just an array.map() expression, etc.
The equivalent of the above in Vue 2.0 JSX is:
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
So, i changed my code to
render(h, {node,data,store}) {
const link = {
href: `/#/schema-type/${data.id}`
};
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span>
edit
</span>
</span>
);
}
And it works!
Try to write your html as a string:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
It looks like you are used to React, but it write a little different.