https://www.entradatoros.com/dropdown
As you can see The Dropdown is not working
This is my page/Component in Nuxt
Code: Select all
<template>
<div>
<Dropdown v-model="selectedCity" :options="cities" optionLabel="NewYork" optionValue="NY" placeholder="Select a City" class="w-full md:w-14rem" />
<br>
<Button label="Submit" />
<br>
<InputText type="text" v-model="value" />
<br>
<Textarea v-model="value" rows="5" cols="30" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const selectedCity = ref();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
</script>
<style scoped lang="scss">
</style>
This is my nuxt.config.ts
Code: Select all
export default defineNuxtConfig({
runtimeConfig: {
public: {
BACKEND_ENDPOINT: process.env.BACKEND_ENDPOINT,
API_ENDPOINT: process.env.API_ENDPOINT,
NODE_SERVER_URL: process.env.NODE_SERVER_ENDPOINT
},
apiSecret: "123",
},
css: ["@/assets/scss/global.scss",
'@fortawesome/fontawesome-svg-core/styles.css',
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css',
'primeflex/primeflex.css'
],
modules: [
'@vueuse/nuxt',
'@nuxt/image',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/scss/_vars.scss" as *;',
},
},
},
},
image: {
// Options
},
build: {
transpile: ["primevue"]
},
})
This is the plugins/primevue.ts
Code: Select all
import PrimeVue from "primevue/config"
import Dropdown from "primevue/button"
import Button from 'primevue/button'
import Textarea from 'primevue/textarea'
import InputText from 'primevue/inputtext'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true })
nuxtApp.vueApp.component("Dropdown", Dropdown)
nuxtApp.vueApp.component('Button', Button)
nuxtApp.vueApp.component('Textarea', Textarea)
nuxtApp.vueApp.component('InputText', InputText)
});
------------------------------------------------------------------------------------
this is my package.json
Code: Select all
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/image": "^1.0.0-rc.1",
"@vueuse/core": "^10.2.1",
"@vueuse/nuxt": "^10.2.1",
"eslint": "^8.41.0",
"eslint-plugin-vue": "^9.14.1",
"nuxt": "^3.4.1",
"sass": "^1.63.6"
},
"dependencies": {
"@fawmi/vue-google-maps": "^0.9.79",
"@fortawesome/fontawesome-free": "^6.4.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"jquery": "^3.7.0",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primevue": "^3.30.0",
"vue3-carousel": "^0.3.1"
},
"type": "commonjs"
}