I am starting to learn vue.js and the following problem has been presented to me, I am creating an SFC and when exporting the images inside the folder src / assets / logo.png I do not load the image, this is the code:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
The solution I have found is to import the logo in the following way:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
I added an import to bring the image and be able to show it, my doubt would be if I have to use 20 images I would have to do it that way, I do not know if it is the most optimal way. I'm using # vue/cli
You can use require to make webpack resolve it correctly.
data() {
return {
imagen: require('./assets/logo.png')
}
}
Related
Every time I use Nuxt.js in my projects I encounter the same mistake with styles. Some of them are enabled after the page is mounted. I tried to import styles from a file from a static folder, tried to use styles in the file (tag style), with the scoped attribute, without it, but each time some styles are included after the page has already been mounted. There are no problems in pure Vue js.
Look here, this is the state I was talking about. It lasts about half a second
And after that the page becomes normal
Sometimes this state persists until the user scrolls the page, sometimes it does not disappear at all
To clarify, I prefer the scoped attribute in my projects, without importing files with styles.
Edit
Ok. I don't know will it helps, but there is the code snippets
This is a test page
<template>
<div>
<app-promo
:data="{
titles: ['адреса пиццерий', 'roni napoletana'],
bgImg: 'page-addresses/promo/promo_bg.png'
}"
>
<app-search></app-search>
</app-promo>
</div>
</template>
This is a search component
<template>
<div v-click-outside="closeResults" class="search">
<div class="search__bar">
<input placeholder="Начните вводить название улицы, чтобы найти ближайшую пиццерию" v-model="searchRequest" #keypress.enter="search" type="text" class="search__input">
<button #click="search" class="search__submit"><img src="#/static/img/page-addresses/promo/zoom.svg" alt="Search"></button>
</div>
<div :class="['search__results', {'search__results_active': showResults}]">
<nuxt-link
:to="item.link"
class="search__result"
v-for="item in searchedItems"
:key="item.title"
>
{{ item.title }}
</nuxt-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchedItems: [
{
title: 'Истикбол улица',
link: '/'
},
{
title: 'Шевченко улица',
link: '/'
},
{
title: 'Тараккиёт улица',
link: '/'
}
],
searchRequest: '',
showResults: false
}
},
methods: {
search() {
this.showResults = true
},
closeResults() {
this.showResults = false
}
},
}
</script>
This is a promo component
<template>
<section class="promo">
<div class="promo__bg"><img src="#/static/img/page-main/promo/promo_bg.png" alt=""></div>
<div class="promo__inner">
<h1 class="promo__title">
<template v-for="title in data.titles">
{{ title }}
</template>
</h1>
<h2 class="promo__subtitle" v-if="data.subtitle">{{ data.subtitle }}</h2>
<slot></slot>
</div>
<div class="promo__label" v-if="data.labelImg">
<img src="#/static/img/page-main/promo/label_img.svg" alt="Img">
</div>
</section>
</template>
<script>
export default {
props: {
data: {
default: {
titles: '',
subtitle: '',
labelImg: '',
bgImg: ''
}
}
}
}
</script>
My nuxtconfig is standard. The styles are too.
I have a sample Vue 3.0 project where, I have few child components with app.vue as parent component. I want to pass an array from app.vue component to list-product component which accepts an array but unable to do so. Code is as follows.
Error: On mount of list-product component, I am logging the input provided array from app.vue which turned out be a string and type check failed .
Stackbliz Link
app.vue
<template>
<Navbar title="FirstCry" />
<div class="row mt-3">
<div class="col-md-4 p-3 border bordered shadow-sm">
<Addproduct />
</div>
<div class="col-md-8">
<ListProduct products={{products}} />
</div>
</div>
<ViewProduct />
</template>
<script>
import Navbar from "./components/Navbar.vue";
import Addproduct from "./components/Addproduct.vue";
import ListProduct from "./components/list-product.vue";
import ViewProduct from "./components/View-Product.vue";
export default {
name: "App",
components: {
Navbar,
Addproduct,
ListProduct,
ViewProduct,
},
data() {
return {
products: [
{
name: "Iphone",
price: "22000",
image: "https://i.imgur.com/J9yBaqj.jpg",
}
]
}
}
};
</script>
<style>
</style>
list-products.vue
<template>
<div class="row">
<div class="col-md-4 product" >
<div class="card">
<div style="overflow: hidden;" class="card-header p-0">
<img class="card-img-top img-fluid" src='https://i.imgur.com/J9yBaqj.jpg' alt="Card image cap" style="height: 300;">
</div>
<div class="card-body">
<center><h5 class="card-title">Iphone</h5></center>
<p class="card-text text-secondary">
<!-- {{products[0].name}} -->
</p>
<center><h4>
<small>
<s class="text-secondary">
22
</s>
</small>
<span class="price">22</span>
</h4>
<a class="btn btn-warning ng-star-inserted" style="margin: 20px;">Add to Cart</a>
<a class="btn btn-primary">Buy Now</a></center>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ListProduct",
props: {
title: String,
products: Array
},
mounted() {
console.log(this.products);
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.product {
margin-top: 10px;
}
.img-fluid:hover {
transform: scale(1.2);
overflow: hidden;
}
small {
font-size: 80%;
font-weight: 400;
}
.text-secondary {
color: #6c757d !important;
}
s {
text-decoration: line-through;
}
</style>
You should bind it using v-bind: or the shorthand syntax : :
<ListProduct :products="products" />
I need to make the modal visible on click, I work through components, new Vue constructs do not work
I've never worked with Vue, now I'm asking for help
Error:
64:4 error 'showModal:' is defined but never used no-unused-labels
<template>
<modalPhoto v-if="showModal == 'true'"></modalPhoto>
<div class="block-inputs">
<div class="input-header">
<h3>Photos</h3>
</div>
<div class="photos">
<div class="photo-block">
<img src="../assets/photo.jpg" class="photo modal-img" v-on:click="viewPhoto('true')">
</div>
</div>
</div>
<div class="save-changes">
<div style="margin: 0 auto;">
<button class="button-add button-save">Save</button>
</div>
</div>
<script>
import modalPhoto from './modal/modalPhoto.vue';
export default {
name: 'Photos',
data() {
showModal: false
},
methods: {
viewPhoto() {
this.showModal = true;
}
},
components: {
modalPhoto,
}
}
I'm trying to output a Vue.js component on my page, I was following the documentation but I'm getting the following error -
[Vue warn]: Unknown custom element: <contacts> - did you register the component correctly?
This is my code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('contacts', require('./components/Contacts.vue'));
const app = new Vue({
el: '#app'
});
The component code:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Contacts list</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
My blade file:
<div class="container">
<contacts></contacts>
</div>
Apologies, I was running npm run watch so that's why the VueJS Component wasn't loading.
I registered component in my app.js like this:
Vue.component('navbar', require('./components/Navbar.vue'));
Now I want to import that component:
<template>
<nav class="navbar">CODE HERE</nav>
</template>
Into my blade.php file:
<body class="">
<div id="app">
<div class="">
<navbar></navbar> <-- here!
#yield('content')
</div>
</div>
</body>
What's the easiest way to do this?
In app.js
import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));
var app = new Vue({
el: '#app',
components: {
'navbar': require('./components/Navbar.vue'),
}
});
In your blade:
<body class="">
<div id="app">
<div class="">
<navbar></navbar>
#yield('content')
</div>
</div>
It's an old thread, but: don't forget to run npm run dev to compile the app.js