Reputation: 36317
I'm getting started with nuxt. My project structure in the screenshot, I've got a vuetify carousel component that was working fine with urls as the src. Now I want to try to serve local static files. I tried:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
export default {
data () {
return {
items: [
{
src: '/static/52lv.PNG'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
}
]
}
}
}
</script>
but now when I run the dev server I get:
$ npm run dev
> [email protected] dev ....\js\nuxt4
> nuxt
i Preparing project for development 20:23:25
i Initial build may take a while 20:23:25
√ Builder initialized 20:23:25
ERROR Could not compile template ....nuxt4\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "~/assets/style/app.styl" from "E:\ENVS\js\nuxt4\assets\style\app.styl"
at Promise.all.templatesFiles.map (node_modules\@nuxt\builder\dist\builder.js:6009:17)
What am I doing wrong?
Upvotes: 3
Views: 9224
Reputation: 442
I had the exact issue, it turned out to be a path issue in my nuxt.config.js file under css and scripts sections. I added a assets folder with sub folders and files within them such as static > assets > etc but in my config file it was ~/assets.
I changed it to ~/static/assets/ and now it compiles correctly.
Hope this helps.
Upvotes: 2
Reputation: 163
I'm starting out with Nuxt.js too! So far, at least for my navbar where I have the static pages linked to, I have my static files routed in the nuxt.config.js
file under generate : { routes: ["file/", "file2/"] }
. Each those files are .vue files under my pages
directory. Now, when I run npm run dev
, I can click into each of those files on my navbar and they come up perfectly. Hope this helps! Comment below if I'm unclear.
Upvotes: 0