I'm migrating over to NuxtJS 3, but my project has several levels of component folders:
/components
/foo
file.vue
file2.vue
/fooTwo
anotherfile.vue
/bar
file1.vue
file10.vue
etc...
Because of Nuxt's naming convention, if I try to import the anotherfile component I'd have to rename every place it's used inside my codebase to this: <FooFooTwoanotherfile/>
Because their documentation states:
the component's name will be based on its own path directory and filename
I really don't want to go through and rename every place that the component is being used. And I also would prefer to not flatten my directory structure either. So, is there some config option in Nuxt 3 that overrides this and lets me just globally call the components by their original name?
My answer here is still relevant for Nuxt3
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
components: [
{
path: '~/components', // will get any components nested in let's say /components/nested
pathPrefix: false,
},
]
})
And will allow you to auto-import components without the need to specify a nested path for the components.
/pages/index.vue
<template>
<div>
<yolo-swag /> <!-- no need for <nested-yolo-swag /> here -->
</div>
</template>
With the following file structure
As #kissu suggested this is the answer:
nuxt.config.ts
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false, //<------------------- here
},
]
Related
I am using VuePress version:
"devDependencies": {
"vuepress": "^2.0.0-beta.26"
}
and I can't add a simple .vue component to my .md page.
My Github LINK
Tried out the other solutions here, but nothing seems to help:
Solution1
Solution2
I was following the guide from the official VuePress documentation about components. But all I get is a zero size component (no content shown)
Would really appreciate any solutions.
EDIT:
to make it a bit simpler than to check my github. The whole project contains anyway only 2 files.
So what I did, is to make a new component.vue file in .vuepress/components:
<template>
<h1>Hello from my test component</h1>
</template>
<script>
export default {}
</script>
<style></style>
and am trying to add it in my README.md file:
# Hello VuePress
### test component
<TestComponent />
<kebab-case-test-component />
Screenshot for my folder tree:
From the VuePress 1.x to 2.x migration docs:
.vuepress/components/
Files in this directory will not be registered as Vue components automatically.
You need to use #vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.
To configure auto component registration:
Install the #vuepress/plugin-register-components plugin:
npm i -D #vuepress/plugin-register-components#next
Add .vuepress/config.js with the following contents:
const { path } = require('#vuepress/utils')
module.exports = {
plugins: [
[
'#vuepress/register-components',
{
componentsDir: path.resolve(__dirname, './components'),
},
],
],
}
demo
I want to change this Vue Material prefix tags "md-":
<md-button>{{title1}}</md-button>
to:
<custom-button>{{title1}}</custom-button>
After looking at the vue-material source code, All the components specify the 'name' attribute manually. You can see an example of that in the code for MdAutocomplete.
You could change the name: 'MdAutocomplete', to name: 'CustomAutocomplete', for each of the files.
There's also a bit of a messier approach that you could take using Vue's async components system. After doing the normal vue-material setup process:
import Vue from 'vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)
You can specify custom component aliases like so:
import Vue from "vue"
export default {
components: {
CustomButton: () => Promise.resolve(Vue.component('MdButton'))
},
// ...
}
I have some base components that I use them in most of the page of my project. So I don't want to import them in each page and prefer to define them global. Related to nuxtjs source if I add components:true to nuxt.config.js my goal will achieved; but it doesn't work for me. And Version in use of nuxtjs is 2.15.2.
By the way, I'll be appreciated of any solution or idea.
You can register the component globally, so it won't be needed to import it in each page. In Nuxt, best way to do that is to create a plugin file.
Create for example the file myPlugin.js in your plugins folder, and use the following:
import Vue from 'vue';
import myComponent from '../components/MyComponent.vue';
Vue.use(myComponent);
Finally, in your nuxt.config.js, add your plugin:
plugins: [
'~plugins/myPlugin'
]
This is the second example presented in the Nuxt plugin doc.
This is not a bug and is totally working as expected, just a change that happened recently. More details can be found on my answer down here: https://stackoverflow.com/a/66336654/8816585
// nuxt.config.js
export default {
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false,
},
]
}
I'd recommend this solution, since it's the official way of doing.
I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js.
I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".
/plugins/octicion.js :
import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'
// Pick one way betweem the 2 following ways
// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'
// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'
Vue.use(octicon);
In MyComponent.vue I use it like
<template>
<div>
<octicon name="repo-forked" label="Forked Repository"></octicon>
</div>
</template>
nuxt.config.js looks like
plugins: [
"#/plugins/bootstrap-vue",
"#/plugins/octicon.js"
],
My Browser shows me:
Where is my error?
Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:
plugins: [
"#/plugins/bootstrap-vue",
{ src: '~/plugins/octicon.js', mode: 'client' }
]
Secondly you may need to add it to the transpile build option, also in nuxt config.js:
build: {
transpile: ['octicon.js']
}
You may also want to wrap the <octicon> tag in a <no-ssr> tag.
After building my app i need a semi absolute path, but only when using standard webpack init. How can i solve this as described below?
Apppath on Server:
domain/subfolder/subfolder2/index.html
If using
vue init webpack-simple myproject
I can set:
assetsPublicPath: ''
The result is that all files will be loaded correctly if placed next to the index.html, or in a subfolder3 (depending on config obviously).
If instead using
vue init webpack myproject
Setting of the assetPublicPath is being ignored unless i make it non empty. So
assetPublicPath: '/static'
works. But while it is kinda relative, the static folder may change as i don't have full control over the overlaying project. Because of that i want to just place the js file next to the html file and use an empty assetsPublicPath to be sure it will always work.
Why is this behavior changing due to the template used? How can i fix it?
I tried digging into all the different config files and failed to find any reason as to why this might happen.
There's nothing stopping you placing a js file in src next to the component and loading that files data into the component script tag:
<template>
<div class="test">
</div>
</template>
<script>
import myClass from './myClass.js'
export default {
name: 'test',
data() {
return {
msg: '',
}
},
methods: {
something(){
let foo = myClass.prop;
}
}
}
</script>
<style lang="scss" scoped>
#import "../../assets/master";
</style>