I'm on Nuxtjs 2.15.4 and I wanna import my layouts from different directories.
for example
import cms from '~~/mylayout/cms.vue'
export default{
layout: cms
}
how can I achieve that?? the important thing is that my layouts be able to import by import function.
I'm doing this for dynamic themes, so that i can read layouts from different directories.
And, how can I change the default layout name?? As I wanna implement dynamic layouts, I probable need to import default layout too. so where I can tell Nuxt that for example ~~/mylayout/d.vue is my default layout?
You don't need to import the layout, it is done for you. Simply put it in the layouts directory.
Related
We are building an app using VueJS as our front end. But we sort of have 2 apps in one. The ecommerce side that the public sees, then we have a admin panel that our employees can use to add products, users, etc.
I am wondering the best way to style each of these sections differently. The ecommerce side we want to use 1 stylesheet (scss) and then our admin panel use another stylesheet. The problem we are running into is that when it all compiles both are added to both sides of the app. So because our admin is loaded second all of our color variables are show on the ecommerce public side of the app.
We have pulled the main.scss out of main.js and created main.scss & main-admin.scss, we are then importing these files into their respective page-template files which we though was going to deouple the 2. But that isnt working, any suggestion on the best way to accomplish this?
You can import your stylesheets dynamically in the script tag like this:
<script setup>
import { ref, watchEffect } from "vue";
const theme = ref(2);
watchEffect(() => {
import(`./assets/base${theme.value}.css`);
});
</script>
The import is working just fine in case I try to use the component from element-plus directly.
What I'm trying to do though, is to extend a component from element-plus library (it uses the composition api from Vue 3) and add some additional properties to my component and methods.
In Vue 2 it would look something like this:
export default {
extends: SomeComponent
}
In Vue 3 this seems to not be working anymore.
I've read about defineComponent but so far, without success implementing it.
Can someone shed me some lights? Thanks.
In order to extend a component that uses Composition API whereas another still uses Options API, we need to also do the setup, such as:
export default { extends: SomeComponent, setup: SomeComponent.setup }
I have a Nuxt project and I need to make custom functions and Vue mixins to reuse in Vue components and pages.
In which folder should I put the files containing these? Should I create a 'lib' folder at the top level of the Nuxt project and put the files in there?
Extra details if that can help:
These functions will be imported only when needed (not global)
These functions will be tested
Nuxt Directory Structure Documentation
in my nuxt project, I usually add four folders at the root directory level of the project which is mixins for all of my mixins, models for the models or classes which I use throughout the app, services which contains all my API's endpoints and utils which contains all my utility functions and other general functions like my input's validation functions and my directory looks like this:
in the case of mixins you can then import the required mixin into the desired component and use them like you normally would:
import someMixin from '#/mixins/someMixin'
...
export default {
mixins: [someMixin],
...
}
you can put the mixins file into 2 folders.
you can create global-mixin.js into the plugins folder and after that set this file into plugins: [] part in nuxt.config. link
you can create a mixins folder and create mixin.js into that. link
But the nuxt.js's documents suggested that the first solution was correct
As Nuxt has not any specific directory for mixins, you can create them like any other plugin you have in your project. I prefer to have my overly used plugins in a folder named common. It is your choice really. But as you want to reuse them throughout your project, then you may want to use global mixins, which are similar, But they can lead to memory leakage when not handled correctly. So we need some kind of flag to prevent it from registering multiple times.
Therefore, create a directory you like (for example myMixinFolder). For example I am going to create a mixin file. I create a file inside myMixinFolder and name it my-mixin-plugin.js.
import Vue from "vue"
if (!Vue.__my_mixin__) {
Vue.__my_mixin__ = true
Vue.mixin({
methods: {
sayIt(name) {
console.log(`Hello dear ${name}`)
}
}
})
}
Then add it to nuxt.config.js file:
plugins: [
{ src: '~/plugins/my-mixin-plugin.js' },
],
Now you can use it in any component like this:
<template>
<span>{{ sayIt('Batman') }}</span>
</template>
Or inside script:
this.sayIt('Batman')
This way you don't need to import mixins again and again (Although, you need to be careful if you have more than one mixin file to prevent memory leakage).
I have added ReCaptcha plugin using Vue.use(ReCaptcha, {some options}) in Gridsome main.js which is displaying on all pages.
How to add plugin for a particular page only in gridsome?
I've never used ReCaptcha or Gridsome before, but generally, if you install a plugin using npm, then the simplest way to use it on a single page would be to import the plugin to the specific component rendered on the route you want to use it on. i.e
/* === MyComponent.vue === */
<script>
import plugin from 'packageName';
// or
import { pluginExport } from 'packageName';
export Default{
// You can then use the plugin/pluginExport here
}
From there you should be able to use the package in that specific component as you normally would if you implemented it app-wide with Vue.use. In some cases, depending on how the plugin is meant to be used, you may need to register the imported plugin Module as a child component in the components object. Like this vuejs QR Code generator for example.
So I was wondering. When a Vuejs app grows, thus the App.js file grows.
My question is:
How should and can this file be split up so each section of the site uses its own app.js file?
You can create separate functions or classes then import them to the App.js via import or using Require.js, Common.js etc. And the just call them inside the App.js
If you find yourself wanting separate Vue instances / more than one Single Page App, you can try this webpack template.