I have this Layout.module.scss file in next js
.app {
display: flex;
}
and in index.js file
when I am including the scss like this it is not working
import "./Layout.module.scss";
export default function Layout({ children }) {
return (
<div className='app'>
</div>
)
}
but when I include scss like this it is working
import styles from "./Layout.module.scss";
export default function Layout({ children }) {
return (
<div className={styles.app}>
</div>
)
}
I want to use the scss like the first one only, please let me know how I can do that, thank you.
First install sass dependency using npm:
npm install sass --save-dev
Then rename your file Layout.module.scss to Layout.scss
And use it like this :
import "./Layout.scss";
export default function Layout({ children }) {
return (
<div className='app'>
</div>
)
}
Related
I am trying to display an image with the img tag by using a path from props for the src attribute.
I've tried changing the path with #, using the whole path with src, adding ../assets/ in the component and only passing the file name (orange.png) as props.
I always get the default broken image displayed.
When inspecting in the browser, the path seems fine.
When I display the image directly, I can see that the path is resolved to some different path <img data-v-1212d7a4="" src="/img/orange.7b71a54c.png">.
Edit:
Additionally I tried this post Can't dynamically pass relative src path for imgs in Vue.js + webpack ,
where using <img :src="require(picture_src)" /> is given as an answer.
This leads to an error: Error in render: "Error: Cannot find module '../assets/orange.png'"
(Edit2:
This answer in the end worked for me in the end as described in my answer post.)
The same error occurs with the similar webpack method using let images = require.context('../assets/', false, /\.png$/) in my script part, as the answer on this post Can't dynamically pass relative src path for imgs in Vue.js + webpack .
I am new to Vue.js, so I don't exactly know what is happening or how to search for this or it might not have anything to do with what I'm originally trying.
I am able to display my image when I pass the path directly, like this
<img src="../assets/orange.png"/>
Now I'd actually like to pass it to my component in the props and then, inside the component, display it reading the path from props.
Component
<template>
<div>
<img :src=picture_src />
<div class="pic_sub">{{pic_desc}}</div>
</div>
</template>
<script>
export default {
name: 'PictureCard',
props: {
picture_src: String,
pic_desc: String
}
}
</script>
Using the component:
<template>
<div>
<PictureCard pic_desc='some description text' picture_src='../assets/orange.png' />
</div>
</template>
<script>
import PictureCard from './components/PictureCard.vue'
export default {
name: 'app',
components: {
PictureCard
}
}
</script>
If it is possible, I'd love to display my from a path that is passed through the component's props.
Otherwise I'd love to know some other solutions, work-arounds or knowledge on best practices in this case.
This worked for me
<img :src="require(`#/assets/img/${filename}`)">
where filename is passed in as a String prop e.g. "myImage.png".
Make sure you use the path specific to your project.
Source: https://github.com/vuejs-templates/webpack/issues/450
Note: # is a webpack alias for /src that is set by default in Vue projects
After some research, I understand that my problem has to do with webpack and resolving filepaths. I used a modified version from this answer:
Vue.js dynamic images not working
and this answer:
Can't dynamically pass relative src path for imgs in Vue.js + webpack
Since the link in the second answer was dead, here's an active link to require.context documentation:
https://webpack.js.org/guides/dependency-management/#requirecontext
My mistake when trying the second link's answer was that I returned only orange.png as the path, while I needed to add ./ at the beginning.
My working picture component now looks like this.
<template>
<div>
<img :src="resolve_img_url(picture_src)" />
<div class="pic_sub">{{pic_desc}}</div>
</div>
</template>
<script>
export default {
name: 'PictureCard',
props: {
picture_src: String,
pic_desc: String
},
methods: {
resolve_img_url: function (path) {
let images = require.context('../assets/', false, /\.png$|\.jpg$/)
return images("./"+path)
}
}
}
</script>
I edited the regular expression to match .png and .jpg file endings. Therefore passing the prop looks like this now
<PictureCard picture_src='orange.png' pic_desc='some picture description'/>
This works for me:
This is how i use my Componenent.
<image-element
:imageSource="require('#/assets/images/logo.svg')">
</image-element>
My Image Component:
<template>
<div>
...
<img v-bind:src=imageSource />
...
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'nuxt-property-decorator'
#Component({
components: {
.....
}
})
export default class extends Vue {
...
#Prop({ default: '' }) imageSource!: String
...
}
</script>
Newer solution:
The 'require()'-method does not work when using Vite.
I got this error: ReferenceError: require is not defined.
This is how I solved it without 'require()' and with composition API:
From parent component:
<ChildComponent icon-filename="icon.svg" />
ChildComponent:
<template>
<div>
<img :src="getImageUrl()">
</div>
</template>
<script setup lang="ts">
import {defineProps} from "vue";
const props = defineProps({
iconFilename: String
})
function getImageUrl() {
// This path must be correct for your file
return new URL(`../assets/icons/${props.iconFilename}`, import.meta.url)
}
</script>
this is my favorite super simple way to do it. It can easily be reused in any file in any folder in my project. Just pass the actual path as a string from the perspective of the parent:
//some file
<ParentA>
<ImageComponent
myImagePath="../../../../../myCat.png"
/>
</ParentA>
//some other file in a different folder in my project
<ParentB>
<ImageComponent
myImagePath="../../myCat.png"
/>
</ParentB>
//child component file
<template functional>
<div>
<img :src="props.myImagePath">
</div>
</template
Thats all not working for me :D
The template File is wrong!
you need to add ":" before you set your prop.
thats how i should use the PictureCard
<PictureCard :picture_src="require('orange.png')"
pic_desc='some picture description'/>
and thats how my PictureCard should look like:
<template>
<div>
<img v-bind:src="picture_src" />
</div>
</template>
export default class PictureCard extends Vue {
#Prop({ default: require("#/assets/orange.svg") }) img!: string
}
so in case no prop is setted, so i added a default prop too.
and yes i only used the image.
I'm trying to use mask on Form with Laravel and VueJS using https://vuejs-tips.github.io/vue-the-mask/, I'm new to Vue so I looked for some way to use mask, I ended up finding this lib. However, I do not know how to use the example of the site since it does not show a complete example, just snippets of code.
Displays the second error:
SyntaxError: import declarations may only appear at the top level of a module inscriation: 62: 8
[Vue Warn]: Error compiling template:
[Vue Warn]: Failed to resolve directive: mask
(found in )
I added the code in the blade.php
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script>
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</ script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</ template>
You can't do import in native (browser) JS, you need to use laravel mix or webpack (or any other bundler)
easiest solution: laravel-mix
npm install laravel-mix --save
then open (or create webpack.mix.js file), and type this (of course you need to specify your own path)
var mix = require('laravel-mix');
mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')
In your input file you create simple vue instance (and import your component)
import Vue from 'vue';
import mask from 'path_to_component.vue'
var app = new Vue({
el: "#root", //root element name
components: {'x-mask': mask}
});
and in your component you put the code:
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</template>
It's not that complex, once you get used to it. You should read/watch about bundlers.
I have some Vue components (.vue) in my Laravel project, resources\assets\js\components. I want to import the components to a view file .blade.php:
<div id='lol'>
<some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
import SomeComponent from '.\resources\assets\js\components\some.vue
new Vue({
el: '#lol'
});
</script>
I got error in console: Uncaught SyntaxError: Unexpected identifier at the import
I don't wanna register the component in app.js
If you don't want to use a compiler, you could use a library such as http-vue-loader, which provides a function to do just that.
Important: The author of the library itself does not recommend to use this library for production environments. Instead, he recommends you to compile your .vue files.
When using the http-vue-loader library, your snippet would look like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<div id='lol'>
<some-component></some-component>
</div>
<script>
new Vue({
components: {
'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
},
el: '#lol',
});
</script>
Alternatively, you can compile and export your vue component as a library, which you then can add to your project.
To export your component as a library, you first need to create an entry point for your component, for example: 'resources\assets\js\components\index.js'. In this entry point, you register your components globally.
import Vue from "vue";
import Some from "./some.vue"
const Components = {Some};
Object.keys(Components).forEach(name=>{
Vue.component(name,Components[name])
})
export default Components;
Next, you need to define a build step for building your library in your package.json, which links to the entry point of your component:
"scripts": {
...
"build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
...
},
Next, call this build step, e.g. by invoking 'yarn build-bundle', or the npm equivalent.
Finally, you can add the compiled component to your webpage. Note, that you don't need to explicitly include your component, since you registered it globally before. Also note that you need to add the type="module" attribute to the script tage, because otherwise you cannot use the import statement. Finally, the outpath of the compiled libraries is the one that is used in your vue.config.js.
<div id='lol'>
<some-component></some-component>
</div>
<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";
const app = new Vue({
el: '#lol',
})
</script>
I want to add an image with a require statement.
But I got the following error:
Cannot find module '../../../assets/skillName.png'
I build app using parcel-bundle and I don't use webpack.
The path to the image is correct, because if I use a static link, it works well:
<img src={require(`../../../assets/skillName.png`)}/>
Try doing it this way:
{Object.keys(this.props.skillset).map((skill) => {
let source = require(`../../../assets/${skill}.png`);
return (
<div key={skill}>
<img src={source}/>
</div>
)
})}
https://codepen.io/smilesaayush/pen/oyzMZd
I did it this way and it worked for me, try not using require, and give absolute url in image source, which I think in your case should be - window.location.host + relative url.
class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
{[100, 200].map((len) => {
return (
<div key={len}>
<img src={`https://placeimg.com/${len}/${len}/any`}/>
</div>
)}
)}
</div>
)
}
}
you can control the steps:
1.really skillName.png image place the assets folder.
2.You can remove skillName name from json data.then see other images.if you can show other image, your image name is incorrect.
because your code is correct but can be small problem.
Is there anyone here using this package vue-bulma-datepicker? I tested the datepicker in firefox when I select a year the datepicker closes.
Did you guys encounter this? any workaround for this?
Thanks!
I ended up with creating my own vue component instead.
https://github.com/ankurk91/vue-flatpickr-component
npm install vue-flatpickr-component --save
Here is how to use it.
<template>
<div>
<flat-pickr v-model="date"></flat-pickr>
</div>
</template>
<script>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
export default {
data () {
return {
date: null,
}
},
components: {
flatPickr
}
}
</script>