i have Nuxt project, when i try to add or edit message property it's not reflect direct, i should terminate the app and re-run it to see the results.
i followed the Nuxt Documentation and applied every single step
Edit your nuxt.config.js modules to look like this
modules: [
[
"#nuxtjs/i18n",
{
locales: [{ code: "en", name: "en-US", file: "en.json" }],
langDir: "locales/"
}
],
]
assuming your strings file is called en.json and it's inside locales/ like locales/en.json
Related
I'm new to vscode and can't get snippets to work properly inside of Vue files. They work in /snippets/vue.json:
{
"<template></template>": {
"prefix": "template",
"body": [
"<template>$1</template>"
]
}
}
This works, as long as it is written in the vue base layer but not inside script/template/style tags. I've tried adding it to vue-injection-markdown.json which I thought is used for exactly that but it doesn't work. I've also created a vue-html.json file and added the json there but it also doesn't make the snippets work:
{
"hello": {
"prefix": "hello",
"body": [
"blub"
]
}
}
I've installed both these plugins:
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
What am I doing wrong?
Ok, it has to be defined either in global.code-snippets with a html scope or in the html.json file.
I have a class where I use some static properties like this:
class Entity {
static LIMIT = 10;
}
So, i can do:
Entity.LIMIT
In order to do that I'm using babel plugin-proposal-class-properties and in my .babelrc I have:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
I'm using jest and my test passes using that config. Now I need to use funcionality of Entity class inside a vuejs component. But I got the error:
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
I also tried a babel config file in my project root: babel.config.js
module.exports = {
presets: ["#babel/preset-env"],
plugins: [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
};
But didn't work.
How can i configure vuejs, to make work this babel plugin?
I'm using vue2.6.11 and vue-cli 3
I got this exact same issue when trying to use "importabular" with vuejs (vuejs 2, vue-cli-3). Importabular uses class properties, after some research I found this babel plugins (plugin-proposal-class-properties), I installed it and added it in vue.config.js.
To finally make it work, I had to add "importabular" (or the nested path) in the transpileDependencies: option. Why that? Because, by default, Babel ignores whatever is in node_module, so you have to tell Babel to not ignore this specific folder.
So, if you want to use babel or some babel plugins with some node_module with vue you should modify the vue.config.js as follow :
module.exports = {
transpileDependencies: [
'path/in/node_module',
],
}
and change the babel.config.js as follow:
module.exports = {
"presets": [
"#vue/cli-plugin-babel/preset"
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
]
}
I am trying to use workbox background-sync in Nuxtjs via #nuxt/pwa-module.
this is my workbox property in nuxt.config.js file:
workbox: {
importScripts : [
'sw-background-sync.js'
]
}
contents of plugins/sw-background-sync.js file :
console.log("backsync called")
workbox.routing.registerRoute(
'https:\/\/example.com\/api\/Survey\/post.*',
new workbox.strategies.NetworkOnly({
plugins: [
new workbox.backgroundSync.Plugin('myQueueName', {
maxRetentionTime: 24 * 60
})
]
}),
'POST'
);
Offline caching is supposed to work by default and it is working fine. but when I uncomment importScripts and refresh the page I get this error in console :
backsync called
workbox-sw.js:1 Uncaught Error: Config must be set before accessing workbox.* modules
at Proxy.setConfig (workbox-sw.js:1)
at sw.js:8
Any example of how to implement pwa background sync with nuxtjs would be appreciated.
Thank you very much.
Actually I should put the script inside workboxExtensions property in nuxt.config.js file:
workbox: {
workboxExtensions : '#/plugins/sw-background-sync.js'
}
When using workbox you can also put:
strategyPlugins:[{
use:'BackgroundSync',
config: {}
}],
I am still trying to find out what config to put in there.
Rendering information from my controller only passes information through to the partials included on the template.
Here is how I go about it in my login controller. After I check password and username provided I send two objects to the dashboard template that I would like to render to the page
res.render(path.join(DIST_DIR, 'dashboard.hbs'), {
user,
company
});
I can log this info and can see that it exists and it also renders out in the partials that included on dashboard.hsb, but it seems that dashboard itself is not getting the data.
My webpack setup
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.hbs$/,
loader: 'handlebars-loader',
query: {
partialDirs: [
path.join(__dirname, './src/views/partials')
],
helperDirs: [
path.join(__dirname, './src/helpers')
]
}
},
new HtmlWebPackPlugin({
filename: 'dashboard.hbs',
title: 'Dashboard',
chunks: ['dashboard', 'dashboard~login', 'vendors~dashboard', 'vendors~dashboard~login'],
template: 'src/views/index/dashboard.hbs',
excludeChunks: ['server']
}),
So the page renders fine and the user information that I try to pass does show up in the partials (used by dashboard layout), but the information for the user that I want to display in the body of dashboard.hbs is always blank. I seems that information is not passed to this template.
Where am I going wrong? I would really appreciate some help here.
I was using the wrong loader. Instead of using handlebars-loader, I updated the code to use the html-loader
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.hbs$/,
loader: 'html-loader',
query: {
partialDirs: [
path.join(__dirname, './src/views/partials')
],
helperDirs: [
path.join(__dirname, './src/helpers')
]
}
},
And now everything works as expected. Hope this helps someone else down the line
I am trying to use THIS library on the client side as a plugin When I npm run dev the client, I get this error
My vue2socketcluster.js file inside the plugins folder looks like this
import Vue2Socketcluster from 'vue2-socketcluster'
Vue.use(Vue2Socketcluster,{
hostname:"localhost",
secure:true,
propName:"socket" // Defaults to socket - so if you want vm.$soc you would change this to "soc"
})
and nuxt config had an entry for plugins
plugins: [
'~/plugins/vue2socketcluster'
],
Any direction will be super appreciated
Fixed it by setting server side rendering to false. Thank you
plugins: [
{ src: '~/plugins/sc', mode: 'client' }
],