I have just generated a project (typescript based) using npm init vue#2. I have a component like this
<script lang="ts">
import $ from 'jquery';
import 'devextreme/integration/jquery';
import 'devextreme/ui/data_grid';
export default({
data() {
return {
msg: 'Hello there!',
}
},
mounted() {
$('#testIt').dxDataGrid({
dataSource: [
{
test1: '1',
test2: '2',
},
{
test1: '3',
test2: '4',
},
{
test1: '5',
test2: '6',
},
],
columns: [
{
dataField: 'test1'
},
{
dataField: 'test2'
},
]
});
}
})
</script>
<template>
<div class="greetings">
<h1>My Grid</h1>
<div id="testIt" />
</div>
</template>
It works fine and show the datagrid, when I m running yarn dev command. But when its build via command yarn build it does not work. I deployed the /dist folder via live-server and it throws error on chrome's console
TypeError: kh(...).dxDataGrid is not a function
Full code can be get from https://github.com/coure2011/ext_code/blob/main/vite-jquery-datagrid.zip
Related
I'm trying to setup nuxt-socket-io on a Nuxt 3 project. I followed all the setup steps in the nuxt-socket-io documentation but it's throwing the following Error:
Cannot add property registeredWatchers, object is not extensible.
Does anyone know what it means? What I'm missing?
Here's what my code looks like:
nuxt.config.js:
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss',
'nuxt-socket-io',
],
app: {
head: {
title: 'Nuxt Dojo',
meta: [
{ name: 'description', content: 'Everything about Nuxt 3'},
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons'}
]
}
},
runtimeConfig: {
public: {
apiUrl: process.env.API_URL,
},
},
io: {
// module options
sockets: [{
name: 'main',
url: 'http://localhost:4000'
}]
},
})
pages/index.vue:
<template>
<div>
<h2 class="text-xl">Index</h2>
<p>This project should become a messaging app.</p>
</div>
</template>
<script setup>
const socket = useNuxtApp().$nuxtSocket({
name: 'main',
channel: '/',
emitTimeout: 1000,
});
/* Listen for events: */
socket.on('message', (msg, cb) => {
console.log({ msg, cb });
});
</script>
i am using vee-validate v.2 and i want to localize error massages .
i have wrote a plugin like this
import {configure} from 'vee-validate'
export default function ({app}){
configure({
defaultMessage:(field,values)=>{
values._field_=app.i18n.t(`fields.${field}`)
return app.i18n.t(`validation.${values._rule_}`,values)
}
})
}
and this is loacales/en.js
validation: {
required: "{_field_} can not be empty",
min: "{_field_} may not be Less than {length} characters",
confirmed: "{_field_} do not matches",
email: "{_field_} is not valid"
},
fields: {
email: 'Email',
password: 'Password',
userName: 'Username',
},
}
and Also this is $i18n in nuxt config
i18n: {
seo: false,
locales: [
{ code: 'en', iso: 'en-US', file: 'en.js' },
{ code: 'de', iso: 'de-GER', file: 'de.js' }
],
lazy: true,
langDir: 'locales/',
baseUrl: process.env.BASE_URL,
defaultLocale: 'de'
},
BUT it doesnt work ,
and pages dont shows
and i get error like this
How can do i fixed it ?
Let me explain my solution step by step :
Step 1) Install the required packages:
npm install nuxt-i18n --save
npm install vee-validate --save
package.json
{
"#nuxtjs/i18n": "^7.0.1",
"vee-validate": "^3.4.12"
}
Step 2) Create a folder named /locales to the root of your project.
Step 3) Create a file /locales/en.js for English
import en from 'vee-validate/dist/locale/en'
export default async (context, locale) => {
return {
validation: en.messages,
email : "email",
};
}
Step 4) Create a file /locales/tr.js for Second Language (Türkçe)
import en from 'vee-validate/dist/locale/tr'
export default async (context, locale) => {
return {
validation: tr.messages,
email : "e-posta",
};
}
Step 5) Create a i18n plugin file /plugins/i18n.js
import {configure } from "vee-validate";
export default function ({app}) {
configure({
defaultMessage: (field, values) => {
return app.i18n.t(`validation.${values._rule_}`, values);
}
});
}
Step 6) Create a validation plugin file /plugins/validate.js
import Vue from 'vue'
import { ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
Vue.component('appValidationProvider', ValidationProvider);
Vue.component("appValidationObserver", ValidationObserver);
extend("required", required);
extend("email", email);
Note: I used 'required' and 'email' rule in this example if you want to use more rules you can visit the guide page and add to this file.
All rule list : https://vee-validate.logaretm.com/v2/guide/rules.html
Step 7) nuxt.config -> plugin Configuration
plugins: [
'~/plugins/i18n.js',
'~/plugins/validate.js',
],
Step 8) nuxt.config -> i18n module Configuration
modules: [
['nuxt-i18n', {
baseUrl: 'https://yourdomain.com',
lazy: true,
loadLanguagesAsync: true,
locales: [
{
name: 'English',
code: 'en',
iso: 'en-US',
file: 'en.js'
},
{
name: 'Türkçe',
code: 'tr',
iso: 'tr-TR',
file: 'tr.js'
},
],
langDir: 'locales/',
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en'
},
strategy: 'prefix_and_default',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
alwaysRedirect: false,
fallbackLocale: 'en',
redirectOn: 'root'
},
parsePages: false,
pages: {
'contact/index': {
tr: '/iletisim',
en: '/contact'
}
}
}]
],
Step 9) nuxt.config -> vee-validate configuration add this :
build: {
transpile: ['vee-validate/dist/rules',
'vee-validate/dist/locale/tr',
'vee-validate/dist/locale/en']
},
Usage -> page : contact/index.vue
<template>
<app-validation-observer v-slot="{ handleSubmit }">
<form class="form" #submit.prevent="handleSubmit(onSubmit)">
<app-validation-provider rules="required|email" v-slot="{ errors }">
<input type="text" :name="$t('email')" v-model="formData.email">
<span class="is-invalid">{{ errors[0]}}</span>
<button>Test</button>
</app-validation-provider>
</form>
</app-validation-observer>
</template>
<script>
export default {
name: "contact",
data() {
return {
formData: {
email: ''
}
}
},
methods: {
onSubmit() {
console.log('form posted :)');
}
}
}
</script>
<style scoped>
.is-invalid {
color: red;
}
</style>
in the file vee-validate.js
import configure method
import {
configure
} from 'vee-validate/dist/vee-validate.full.esm'
then use it like
export default ({ app: { i18n } }) => {
configure({
defaultMessage: (field, values) => {
return i18n.t(`validation.${values._rule_}`, values);
}
});
})
and in i18n translations folder add for every language
import en from 'vee-validate/dist/locale/en'
export default {
validation: en.messages,
}
I am very new to Quasar, I want to display Quasar tree nodes from a Local JSON file and with on click of a particular node item I want to show some text.
As of now I am using Quasar tree like this.
<template>
<q-page class="flex fixed-left">
<q-tree
:nodes="simple"
node-key="label"
no-connectors
:expanded.sync="expanded"
text-color="blue"
></q-tree>
</q-page>
</template>
<style>
</style>
<script>
export default {
name: 'HelloWorld',
data () {
return {
expanded: [ 'Resources' ],
simple: [
{
label: 'Resources',
children: [
{
label: 'Projects',
children: [
{
label: 'Data sets' ,
children: [
{
label: 'Items',
}
]
},
{ label: 'Good recipe' }
]
},
{
label: 'Good service (disabled node with icon)',
icon: 'room_service',
disabled: true,
children: [
{ label: 'Prompt attention' },
{ label: 'Professional waiter' }
]
},
{
label: 'Pleasant surroundings (with icon)',
icon: 'photo',
children: [
{
label: 'Happy atmosphere (with image)',
img: 'https://cdn.quasar.dev/img/logo_calendar_128px.png'
},
{ label: 'Good table presentation' },
{ label: 'Pleasing decor' }
]
}
]
}
]
}
}
}
</script>
It was coming like this
Now I wanted to get these nodes from a local JSON file and on click on Items should display some text .
Please help me with this.
To import JSON in ECMAScript:
If you don't have a lot of JSON files and you have the permission to modify and convert them into JS files, you can follow this answer: https://stackoverflow.com/a/39855320/3241933
Then you should import the vanilla JS object into data().
Example solution:
<template>
<q-page class="flex fixed-left">
<q-tree
:nodes="simple"
node-key="label"
no-connectors
:expanded.sync="expanded"
text-color="blue"
></q-tree>
</q-page>
</template>
<style>
</style>
<script>
import jsonData from './data.js'
export default {
name: 'HelloWorld',
data () {
return {
expanded: [ 'Resources' ],
simple: jsonData
}
}
}
</script>
Make sure that your import is an array of object.
I have a Vue application that leverages Vuetify. In this application I have a component called city-selector.vue which is setup like this:
<template>
<select-comp
:id="id"
:items="cityList"
:item-text="name"
:item-value="cityCode"
#input="onInput">
</select-comp>
</template>
<script>
import VSelect from '../vuetify/VSelect';
export default {
name: 'city-select-comp',
extends: VSelect,
props: {
id: {
type: String,
default: '',
},
cityList: {
type: Array,
default: () => { return [] }
},
},
methods: {
onInput() {
//Nothing special, just $emit'ing the event to the parent
},
},
}
</script>
Everything with this component works fine except that when I open my dev tools I get a bunch of console errors all saying this (or something similar to this):
Cannot read property '$refs' of undefined
How can I fix this sea of red?
This is due to a bad import that you do not need. Remove the import VSelect and the extends statements and your console errors will disappear, like this:
<script>
export default {
name: 'city-select-comp',
props: {
id: {
type: String,
default: '',
},
cityList: {
type: Array,
default: () => { return [] }
},
},
methods: {
onInput() {
//Nothing special, just $emit'ing the event to the parent
},
},
}
</script>
I've almoust finished my app in Vuejs and now I decided to "rewrite" everything on Nuxt due to SSR :)
I almoust get everything but there is this getter thing I am not getting.. I can't make it around even though I tried so hard and I am not sure what I am missing.
I am using vuex module so my /store/categories.js looks like:
export const state = () => ({
categories: [
{
name: 'category 1',
id: '1'
subcategories: [
{
name: 'Subcategory 1',
id: '1.1'
}
]
},
{
name: 'category 2',
id: '2',
subcategories: [
{
name: 'Subcategory 2',
id: '1.1'
}
]
}
]
})
export const getters = () => ({
filterCategory() {
return state.categories
},
})
This is a simple getter above and I can't even make this work..
And here is my posts/test.vue page:
<template>
<div>
<p>{{ filter }} </p>
<p>{{ mainCategories }} </p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'test',
layout: 'test',
data () {
return {
search: '',
}
},
computed: {
...mapGetters({
filter: 'categories/filterCategory'
}),
mainCategories () {
return this.$store.getters['categories/filterpazari']
}
},
}
</script>
What am I missing ?
Getters should be exported as objects not function.
As Bert already mentioned in the comment how to declare getters. But it was trouble some to find the solutions at first glance. So here is the formated answer.
const getters = {
filterCategory: state => state.categories,
}
export default getters
Credit to Bert