I am working on a project in nuxt3 and I wanna add google places auto-complete on search input. I've been search for last 4 hours but can't got a way to set it up.
After long research I found the below solution working for me in the nuxt3 stable version.
Install the following version (0.9.72) of #fawmi/vue-google-maps
your package.json file:
"dependencies": {
"#fawmi/vue-google-maps": "0.9.72",
}
in nuxt.config.ts add following lines
build: {
transpile: ["#fawmi/vue-google-maps"],
},
Then create folder named plugins and make a file inside it named vueGoogleMaps.ts
📦plugins
┗ 📜vueGoogleMaps.ts
Your vueGoogleMaps.ts file:
import { defineNuxtPlugin } from "#app";
import VueGoogleMaps from "#fawmi/vue-google-maps";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, {
load: {
key: "Your-key",
libraries: "places", // This is required if you use the Autocomplete plugin
},
autobindAllEvents: true,
});
});
then in example.vue:
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
#place_changed="setPlace"
>
</GMapAutocomplete>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
Related
I use vue3 with composition api, but when I build my project, the ref element always undefined.
I reproduced it, maybe I used it incorrectly, but I don't know why.
I defined a ref in hooks function.
const isShow = ref(false)
const rootRef = ref<HTMLDivElement>();
export default function () {
function changeShow() {
isShow.value = !isShow.value;
console.log(isShow.value, rootRef.value);
}
return { isShow, rootRef, changeShow };
}
Use rootRef in the HelloWorld.vue and linked element.
<script setup lang="ts">
import useShow from "../composables/useShow";
const { rootRef, isShow } = useShow();
</script>
<template>
<div ref="rootRef" v-show="isShow" class="test"></div>
</template>
Create a button in App.vue and bind click function.
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import useShow from "./composables/useShow";
const { changeShow } = useShow();
</script>
<template>
<button #click="changeShow">切换</button>
<HelloWorld />
</template>
When I click button, it works.
But when I build it and import from lib, it doesn't work.
My vite.config.ts is as follows:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "src")
}
},
build: {
cssCodeSplit: true,
sourcemap: true,
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "my-project",
fileName: format => `my-project.${format}.js`
},
rollupOptions: {
external: ["vue"],
preserveEntrySignatures: "strict",
output: {
globals: {
vue: "Vue"
}
}
}
}
});
I think the problem is the definition of rootRef. It seems that only binding location can use it. This is no different from defining it in a component. I need to use it in multiple places.
Oddly, in this way, the Dev environment works fine, but Pro env is not available. Do I need to modify the build configuration of vite.
How do I do that?
The problem is your App.vue uses its own copy of composables/useShow instead of the one from the lib.
The solution is to export the composable from the lib so that your app can use the same one:
// src/index.ts
import { default as useShow } from './composables/useShow';
//...
export default {
//...
useShow
};
In App.vue, use the lib's composable:
import MyProject from "../dist/my-project.es";
const { changeShow } = MyProject.useShow();
GitHub PR
I have installed vuelidate 2 to validate forms in my NuxtJS project. I followed instructions for installation and setup step by step according to vuelidate documentation. This is how my setup files look until now:
package.json
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#vue/composition-api": "^1.2.2",
"#vuelidate/core": "^2.0.0-alpha.26",
"#vuelidate/validators": "^2.0.0-alpha.22",
"cookie-universal-nuxt": "^2.1.5",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"uikit": "^3.7.1"
}
plugins/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
and nuxt.config.js for #vue/composition-api
plugins: [
{ src: '~/plugins/composition-api.js' }
]
and finally this is how I'm using vuelidate inside my component:
<script>
import useVuelidate from '#vuelidate/core'
import { required } from '#vuelidate/validators'
export default {
setup () {
return { v$: useVuelidate() }
},
data () {
return {
contact: {
name: ''
}
}
},
validations () {
return {
contact: {
name: { required }
}
}
},
methods: {
submitForm () {
this.v$.$validate()
.then((isFormValid) => {
if (isFormValid) {
console.log('valid!!!')
} else {
return false
}
})
},
}
}
</script>
<template>
<label>
<input v-model="contact.name">
<div v-if="v$.contact.name.$error">Name is required.</div>
</label>
</template>
These are a couple of problems that occur:
when I place v-if="v$.contact.name.$error" inside template I get the error Cannot read property 'name' of undefined.
When I call submitForm method, the value of isFormValid is always false. Even when I have filled the contact.name field. And validation properties like $dirty don't change.
I have no idea why these happen. What am I doing wrong?
Update: (In case it might be useful to solve the problen) My console errors filter was unchecked by accident and I hadn't seen this Nuxt warning: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.. As I searched about this error I found out Nuxt uses a dependency called Nuxt composition api which depends on #vue/composition-api. But when I reomved #vue/composition-api from plugins even the code inside setup didn't work correctly.
Solution with vuelidate:
create plugin (plugins/vuelidate.js):
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
nuxt.config:
plugins: [
{ src: '~/plugins/vuelidate' }
],
import:
import { required } from 'vuelidate/lib/validators'
method:
formSubmit() {
this.$v.$touch();
if (!this.$v.$invalid) {
// if invalid datas
}
},
template:
<h3
:class="{
'is-invalid': $v.contact.name.$error,
}"
>
Something
</h3>
I was trying to implement Monaco Editor in Vue 3 application but I could not get the web worker running.
// Editor.vue
<template>
<div id="container">
<div id="editor-section"></div>
<button #click="runCode">Run</button>
</div>
</template>
<script>
import * as monaco from "monaco-editor";
import { onMounted } from "vue";
export default {
name: "Editor",
setup() {
let codeEditor = null;
function initEditor() {
codeEditor = monaco.editor.create(document.getElementById("editor-section"), {
value: "function hello() {\n\talert('Hello world!');\n}",
language: "javascript",
theme: "vs-dark"
});
}
function runCode() {
console.log("runCode");
console.log(codeEditor.getValue());
}
onMounted(() => {
initEditor();
})
return { codeEditor, runCode }
},
};
</script>
I am getting the Editor but there is this issue
I am using
// vue.config.js
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = {
plugins: [
new MonacoWebpackPlugin()
]
};
Am I missing anything?
Should I care about the Issue anyway?
My goal of the project is I want to implement a web editor that takes the written file and compiles in docker container.
It looks like you put the plugin in the wrong place. It's supposed to be placed in configureWebpack which represents for webpack configuration instead:
vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin(), // Place it here
]
},
// ...
}
I'm new to vue.js. Integrated CKEditor successfully but having trouble to integrate CKFinder in it. I'm trying to Import CKFinder in CKEditor component but I'm getting an error.
CKEditor-Vue Component:
<template>
<ckeditor :editor="editor" :value="defaultValue"
#input="editorInput" :disabled="disabled" :config="editorConfig"></ckeditor>
</template>
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
CKFinder
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>
<style scoped>
</style>
When I try to import CKFinder it's showing ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.. Screenshot:
Am I doing anything wrong? Do you have any integration guide or correction on my component?
Thanks in advance for helping me.
You don't have to import
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
because it is already included in the build of your choice. You only need to configure it and the error should disappear.
To make it clear like what oleq mean, just make a config under the editorConfig like this. You don't need to import it.
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
ckfinder: {
uploadUrl:
'/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
filebrowserBrowseUrl: '/ckfinder/browser',
filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
filebrowserUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
}
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>
I've created a vuejs library with some components that could be used in many project.
In that library, I've got a component which can load svg files to be used inline in html (svg-icon).
It work great.
But in this same library, I've got another component which use svg-icon with a svg image stored in the library.
An import point, I'd like to use this library (node module) with an npm link
Which is the good way to give the path of the svg image, or where to store it?
I've tried a lot of different paths, but none of them is working...
This is my svg-icon component:
<template>
<component :is="component"></component>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true
}
},
data () {
return {
component: null
}
},
watch: {
icon: () => {
this.load()
}
},
computed: {
loader () {
return () => import(this.icon)
}
},
methods: {
load () {
this.loader().then(() => {
this.component = () => this.loader()
})
}
},
mounted () {
this.load()
}
}
</script>
And this is the component which use svg-icon (the svg image is in the same folder actually) :
<template>
<svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
<svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'
export default {
components: {
SvgIcon
}
}
</script>
I always got this errors:
Cannot find module '~my-module/components/media/no-image.svg'
Cannot find module './no-image.svg'
Which is the good path in that situation? Or should I put the svg file somewhere else? (I'd like to keep it in the library)
I've created a CodeSandbox here
SvgIcon.vue
<template>
<span v-html="icon"></span>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
required: true
}
}
};
</script>
HelloWorld.vue
//Usage
<template>
<svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";
export default {
data() {
return { AlertIcon };
},
components: {
SvgIcon
}
};
</script>
I've made some changes to your components.
You need to import the image and pass it to your component because dynamic import causes complications when it comes to the absolute paths.
I've removed some unnecessary fields from your SvgIcon code.
Hope this helps.