2

I'm using VueJS 3 applications using vue-router, vue and core-js applications where I want using compoments. In the views directory, I have a Home.vue file which looks like this:

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    },
  },
  setup() {
    const items = ref(data)

    return {
      items,
    }
  },
}
</script>

I have 2 components in the components directory:

src/components
  |- PictureBox.vue
  |- PropertyBox.vue

PictureBox.vue for example looks like this:

<template>
  <div class="infobox-item-picturebox">
    <img class="infobox-item-picturebox-image" :src="require(`@/static/${image}`)" alt="item.title" />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  props: {
    image: {
      type: String,
    },
  },

  setup() {
    const state = reactive({
      count: 0,
    })

    return {
      ...toRefs(state),
    }
  },
}
</script>

But I get a warning when compiling:

WARNING  Compiled with 2 warnings 10:58:02 PM

warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PictureBox' was not found in '@/components/PictureBox.vue'

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PropertyBox' was not found in '@/components/PropertyBox.vue'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.19.187.102:8080/

Also in browser developer mode, I see the same warnings:

enter image description here

My directory structure looks like this:

enter image description here

And this is my main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/style.css'

createApp(App).use(router).mount('#app')

This is the router page (I'm not using router actually looks like here):

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

Please, can you help me why I have this warning and my content from <template> in PictureBox or in PropertyBox was not loaded? Thank you so much for any advice

1 Answer 1

5

The component instance is exported as default (export default {...) in its single file and it should be imported like :

 import PictureBox  from '@/components/PictureBox.vue'

instead of:

import { PictureBox } from '@/components/PictureBox.vue'
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much. Yes.... You're totally right. Oh no. Beginners fault. Sorry and thank you very very much. This definitely resolve a problem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.