I'm using the plugin vue-i18n for translations in a Nuxt.js-powered SPA. This allows easy access to messages within components, like this:
$t('footer.press')
But how do I get translations outside components? In my specific case, I need them in a store action:
export const actions = {
async myAction({ commit, state, rootState, rootGetters }, options) {
(...)
const message = $t("example.message.key") // doesn't work, undefined
const message1 = this.$i18n.t("example.message.key") // doesn't work, undefined
(...)
})
}
This is how I include the vue-i18n plugin in the project:
package.json
…
"dependencies": {
…
"vue-i18n": "^8.18.2",
…
},
…
nuxt.config.js
…
plugins: [
…
'~/plugins/i18n',
…
],
…
After some research, I found a working solution on the Vue Forum here:
const message = this.app.i18n.t("example.message.key")
Works for me like a charm!
this.$t('logInWongCredentials')
(nuxt)
Related
I am currently unable to use third-party plugins in my Nuxt 3 application. Here's what my code/setup looks like:
In my package.json I have the following dependency: "#braze/web-sdk": "^4.6.1"
In my plugins/ directory, I have a braze.client.js file
Within the braze.client.js file, I have the following:
import * as braze from '#braze/web-sdk'
export default defineNuxtPlugin(() => {
braze.initialize(apiKey, {
baseUrl: apiEndpoint
})
return {
provide: {
openSession
}
}
})
Within my nuxt.config.ts, I added the following (since my project has Vite, I followed Braze's documentation here: https://www.braze.com/docs/developer_guide/platform_integration_guides/web/initial_sdk_setup/#vite):
optimizeDeps: {
exclude: ['#braze/web-sdk']
}
Then within my <script> tags within the page/component, I have the following:
const { $openSession } = useNuxtApp()
onMounted(() => {
$openSession()
})
All the steps above continue to create a "500 navigator is not defined" error and I'm stumped with how I can resolve it.
I tried using beforeOnMount, not using as lifecycle hook, as well as placing $openSession() within an if statement:
if (process.client) {
}
Yet no matter what, it still renders the 500 error.
In the Stencil docs section on framework integration with Vue it states the following:
In order to use the custom element library within the Vue app, the
application must be modified to define the custom elements and to
inform the Vue compiler which elements to ignore during compilation.
According to the same page this can be achieved by modifying the config of your Vue instance like this:
Vue.config.ignoredElements = [/test-\w*/];
This relates to Vue 2 however. With Vue 3 (which Ionic Vue uses) you have to use isCustomElement as stated here.
Regretably, I can’t for the life of me get Vue and Stencil to play nice. I have tried setting the config like this:
app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)
This causes Vue throw the following warning in the console:
[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `#vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via #vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/p
However, I have no idea how to implement any of the above suggestions using Ionic Vue. I have been messing around with chainWebpack in config.vue.js but without success so far.
Any help would be greatly appreciated.
I'm not an expert in Vue but here's how I did it:
Add the following to your ./vue.config.js (or create it if it doesn't exist):
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
// ignore Stencil web components
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('test-')
}
return options
})
},
}
This will instruct Vue to ignore the test-* components. Source: https://v3.vuejs.org/guide/web-components.html#skipping-component-resolution
Next, load the components in ./src/main.ts.
Import the Stencil project:
import { applyPolyfills, defineCustomElements } from 'test-components/loader';
Then replace createApp(App).use(router).mount('#app') with:
const app = createApp(App).use(router);
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements();
});
app.mount('#app')
Source: https://stenciljs.com/docs/vue
Also, if anyone is using vite2+, just edit the vite.config.js accordingly:
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('test-') // ✅ Here
}
}
}) ],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
I am building a Nuxt app and trying to create a route guard. How can I access $can in my Nuxt middleware?
export default (context) => {
const { route } = context
route.matched.some((routeRecord) => {
const options = routeRecord.components.default.options
console.log(options)
// should use $can here
return true
})
}
I import the following in my nuxt.config.js:
plugins: [
{ src: '#plugins/vue-can.js' },
]
I add casl as plugins on the Nuxt $auth module:
auth: {
plugins: [
'#plugins/vue-casl.js',
]
}
This is because I need to access $auth.user in my plugins.
All of this works good, except I can't find $abilities or $can in my Nuxt middleware.
PS: I am talking about this package: #casl/vue
$abilities and $can should both be available as properties of the context object in your middleware, so you should be able to access them using context.$foo.
If you don't see it, it is probably because it was not injected properly. The plugin you registered in your nuxt.config.js should use inject to add $can to the global vue instance and make it available as a property of this and context. See the documentation for further detail: https://nuxtjs.org/docs/2.x/directory-structure/plugins/#inject-in-root--context
In my Vuepress project I would like to use v-runtime-template.
Their setup instruction says
You must use the with-compiler Vue.js version. This is needed in order to compile on-the-fly Vue.js templates. For that, you can set a webpack alias for vue to the vue/dist/vue.common file.
This could be achieved by adding
module.exports = {
runtimeCompiler: true
};
to vue.config.js, but I do not understand how to configure in Vuepress.
I tried this:
// .vuepress/enhanceApp.js
export default ({ Vue, options, router, siteData }) => {
Vue.config.runtimeCompiler = true
}
but it did not give any results.
How should the configuration be done?
From: https://github.com/vuejs/vuepress/issues/402#issuecomment-388169056
Add the following to your .vuepress/config.js:
chainWebpack(config) {
config.resolve.alias.set('vue', 'vue/dist/vue.common.js')
}
More info: https://vuepress.vuejs.org/config/#chainwebpack
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.