I am using vue js with nuxt and like to make use of component-level caching. I followed therefore the two links and tried to integrate it in my we bapp. But obviously it seems not to work for my component?
nuxt js - how to cache vu components
vue ssr guide - component level caching
My component just wraps an iframe and to avoid that every time the source of the iframe get called I like to have this cached
any idea why this is not working? Did I miss here anything?
My component
<template>
<div id="footer-copyright-wrapper">
<iframe id="frame-footer-copyright" src="http://targeturl" scrolling="no" frameBorder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"/>
</div>
</template>
<script>
export default {
name: 'footer1', // required
serverCacheKey: props => 'footer1',
}
</script>
My nuxt js conig
const isProduction = (process.env.NODE_ENV === 'production')
const host = (isProduction) ? 'api.xxx.com' : 'localhost'
const scheme = (isProduction) ? 'https' : 'http'
const baseUrl = (isProduction) ? `${scheme}://${host}/rest-api` : `${scheme}://${host}:8080/rest-api`
export default {
env: {
api: {
host: host,
scheme: scheme,
baseUrl: baseUrl
},
},
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://www.paypalobjects.com/api/checkout.js' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'#/assets/styles/global.scss'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'~/plugins/axios.js',
'~/plugins/validate.js',
'~/plugins/mq.js',
'~/plugins/global.js',
'~/plugins/print.js'
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'~/modules/nuxt-auth/lib/module/index.js',
'nuxt-i18n',
'nuxt-stripe-module',
'#nuxtjs/component-cache',
],
/*
** Axios module configuration
*/
axios: {
baseURL: `${baseUrl}/`,
https: (isProduction) ? true : false,
progress: true,
debug: false
},
/*
** Build configuration
*/
build: {
// Add exception
transpile: [
'vee-validate/dist/rules'
],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
},
/*
** Router configuration
*/
router: {
middleware: [
'auth',
'auth-refresh'
]
},
/*
** Auth configuration
*/
auth: {
plugins: [
'~/plugins/auth.js'
],
redirect: {
login: '/auth/login',
logout: '/',
home: '/',
callback: '/auth/callback'
},
strategies: {
local: {
_scheme: 'local',
name: 'local',
endpoints: {
login: {
url: `${baseUrl}/auth/getAccessToken`,
method: 'post',
propertyName: false
},
refresh: {
url: `${baseUrl}/auth/refreshAccessToken`,
method: 'post',
propertyName: false
},
logout: {
url: `${baseUrl}/auth/logout`,
method: 'post',
propertyName: false
},
user: {
url: `${baseUrl}/auth/user`,
method: 'get',
propertyName: false
}
},
tokenRequired: true,
tokenType: 'Bearer',
tokenName: 'Authorization',
globalToken: true,
accessTokenKey: 'access_token',
refreshTokenKey: 'refresh_token',
automaticRefresh: true,
expiration: {
factor: 0.9,
timeFormat: 'seconds'
}
}
}
},
/*
** i18n configuration
*/
i18n: {
locales: [
{
code: 'en',
name: 'English',
file: 'en.json'
},
{
code: 'de',
name: 'Deutsch',
file: 'de.json'
},
{
code: 'fr',
name: 'Français',
file: 'fr.json'
},
{
code: 'it',
name: 'Italiano',
file: 'it.json'
}
],
lazy: true,
defaultLocale: 'de',
langDir: 'locales/'
},
}
Related
I'm having a problem with creating a sitemap for my website.
this is gatsby-config.js content :
module.exports = {
siteMetadata: {
siteUrl: `https://www.mywebsite.com`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
{
resolve: 'gatsby-plugin-sitemap',
options: {
excludes: [],
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
serialize : ({site,allSitePage}) =>
allSitePage.nodes.map(node => { // this is line 32
return {
url: `${site.siteMetadata.siteUrl}${node.path}`,
changefreq: `never`,
priority: 0.5,
}
})
},
},
'gatsby-plugin-react-helmet',
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
],
}
I get this error when I want to build the project :
note: when I don't add options like this:
module.exports = {
siteMetadata: {
siteUrl: `https://www.mywebsite.com`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
'gatsby-plugin-sitemap',
'gatsby-plugin-react-helmet',
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
],
}
everything works fine but it does not meet my needs (all pages have the same priority 0.7)
Solved! this code does not work with versions above 3.3.0 so I downgraded the sitemap plugin from 4.9.0 to 3.3.0 and now works like a charm.
For those who may be facing the issue: It as been solved by downgrading the plugin to the 3.3.0 version prior to the 4.9.0 (the one causing the issue).
https://www.npmjs.com/package/gatsby-plugin-sitemap/v/3.3.0
Just for the info, upon deployment, the form was created in netlify along with the app, so the form should be visible to the crawler.
However upon testing the deployed nuxt app, and submitting the form, I recieve the above mentioned 404.
I have tried incremental changes like changing ssr: true in nuxt.config.js , adding the netlify tag to the opening element etc. and still no luck.
Any help would be greatly appreciated.
Contact.vue - here is my form component with all the html and methods
<form class="contact-grid"
name="contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
#submit.prevent="handleSubmit"
>
<input value="contact" name="form-name" type="hidden" />
<label class="grid-name">
<input id="grid-name" type="text" name="name" :placeholder="$t('Name')"
/>
</label>
<label class="grid-prezime">
<input id="grid-prezime" type="text" name="lastName" :placeholder="$t('LastName')"
/>
</label>
<label class="grid-predmet">
<input id="grid-predmet" type="text" name="subject" :placeholder="$t('Subject')"
/>
</label>
<label class="grid-email">
<input id="grid-email" type="email" name="email" placeholder="Email"
/>
</label>
<label class="grid-komentar">
<textarea id="grid-komentar" type="text" name="comment" :placeholder="$t('Comment')"
/>
</label>
<button type="submit" class="grid-submit-btn">{{ $t('Send') }}</button>
</form>
data() {
return {
message: {
name: "",
lastName: "",
subject: "",
email: "",
comment: "",
myFile: undefined
}
}
},
methods: {
handleSubmit: (event) => {
const { name } = Object.fromEntries(new FormData(event.target))
let message = { name, lastName, subject, email, comment }
let encoded = Object.keys(message)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(message[key])}`)
.join("&")
console.log(encoded);
const axiosConfig = {
header: { "Content-Type": "application/x-www-form-urlencoded" }
};
axios.post(
"/",
({
"form-name": "contact",
...encoded
}),
axiosConfig
);
}
}
Here is the configuration file for Nuxt.
nuxt.config.js
import colors from 'vuetify/es5/util/colors'
import i18n from './config/i18n'
export default {
target: 'static',
ssr: false,
generate: {
fallback: true
},
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
// titleTemplate: '%s - app',
title: 'Gynaecologia et perinatologia',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
{ hid: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
[
'nuxt-i18n',
{
vueI18nLoader: true,
defaultLocale: 'hr',
locales: [
{
code: 'en',
name: 'Eng',
iso: 'en-US'
},
{
code: 'hr',
name: 'Hrv',
iso: 'hr-HR'
}
],
vueI18n: i18n
}
],
// https://go.nuxtjs.dev/eslint
'#nuxtjs/eslint-module',
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
'#nuxtjs/fontawesome'
],
fontawesome: {
icons: {
solid: true,
brands: true
}
},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'nuxt-i18n',
],
i18n: {
strategy: 'prefix_except_default',
seo: true,
i18n: {
locales: [
{
code: 'en',
name: 'Eng',
iso: 'en-US'
},
{
code: 'hr',
name: 'Hrv',
iso: 'hr-HR'
}
],
defaultLocale: 'hr',
vueI18n: {
fallbackLocale: 'hr',
messages: {
hr: {
welcome: 'Dobrodošli'
},
en: {
welcome: 'Welcome'
}
}
}
}
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// baseURL: 'https://gynaecolperinatol.hr/',
// retry: { retries: 3 }
},
// publicRuntimeConfig: {
// axios: {
// browserBaseURL: 'https://gynaecolperinatol.hr/'
// }
// },
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
Adding ssr: true in nuxt.config.js fixed the problem.
i'm using Nuxt JS and the Nuxt JS content module. I'm using the latest version of Nuxt JS and have been creating content, blog posts.
I've got my blog post structure URLs as: /blog/post-name and have the Search Console set up.
Oddly, for some reason, the majority of my content is being shown as "Duplicate, submitted URL not selected as canonical" by Google and I'm not sure how to fix this in Nuxt JS? Or if there's actually anything wrong at all?
My Nuxt JS config file is:
require('dotenv').config();
import axios from 'axios'
import getRoutes from './utils/getRoutes'
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'static',
/*
** Env variables
*/
env: {
BASE_URL: process.env.BASE_URL || "https://domain-monitor.io",
API_URL: process.env.API_URL || "http://127.0.0.1:8000",
ONESIGNAL_PUSH_APP_ID: process.env.ONESIGNAL_PUSH_APP_ID || "",
ONESIGNAL_SAFARI_WEB_ID: process.env.ONESIGNAL_SAFARI_WEB_ID || "",
GA_ID: process.env.GA_ID || ""
},
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: 'Domain Monitor',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'og:title', name: 'og:title', content: 'Domain Monitor' },
{ hid: 'description', name: 'description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' },
{ hid: 'og:description', name: 'og:description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
]
},
/*
** Global CSS
*/
css: [
'#/assets/scss/domain-monitor.scss'
],
/*
** Bootstrap Vue
*/
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{ mode: 'client', src: '#/plugins/bootstrap-vue-icons' },
{ mode: 'client', src: '#/plugins/vue-axios' },
{ mode: 'client', src: '#/plugins/vee-validate' },
{ mode: 'client', src: '#/plugins/vue-moment' },
{ mode: 'client', src: '#/plugins/content-images' },
{ mode: 'client', src: '#/plugins/content-videos' }
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
['#nuxtjs/google-analytics', {
id: process.env.GA_ID
}]
],
/*
** Nuxt.js modules
*/
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/onesignal',
'#nuxtjs/pwa',
'#nuxt/content',
'#nuxtjs/sitemap',
['#nuxtjs/component-cache', { maxAge: 1000 * 60 * 5 }] // 5 minutes
],
/*
** Auth config
*/
auth: {
redirect: {
login: '/account/login',
logout: '/account/login',
callback: '/account/login',
home: '/account/domains'
},
strategies: {
local: {
login: { url: 'auth/login', method: 'post', propertyName: 'token' },
logout: { url: 'account/logout', method: 'post' },
user: { url: 'auth/user', method: 'get', propertyName: 'user' }
}
}
},
/*
** One Signal
*/
oneSignal: {
init: {
appId: process.env.ONESIGNAL_PUSH_APP_ID,
safari_web_id: process.env.ONESIGNAL_SAFARI_WEB_ID,
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: true
}
}
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: process.env.API_URL
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
extractCSS: true,
extend (config, ctx) {
const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
vueLoader.options.transformAssetUrls = {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
}
},
/*
** Sitemap configuration
** See https://www.npmjs.com/package/#nuxtjs/sitemap#setup
*/
sitemap: {
hostname: process.env.BASE_URL, // https://www.yoursite.com
exclude: [
'/account/recovery',
'/account/reset',
'/account/profile',
'/account/domains/add',
'/account/domains',
'/account/monitors/add',
'/account/monitors',
'/help/account/introduction',
'/help/monitors/introduction',
'/help/domains/introduction'
],
routes() {
return getRoutes();
},
}
}
And here's a screenshot of what Google Search Console is telling me about one of these pages.
I'm not sure why all of my posts are appearing under this and whether I should be concerned? I haven't long launched the website, and recently have been posting every day.
See: https://domain-monitor.io/blog for the content
I'm using #nuxtjs/markdownit to parse markdown files, I want to enable creating permanent links feature in 'markdown-it-anchor' plugin, I used following code in nuxt.config.js but not working:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/markdownit'
],
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
'markdown-it-anchor',
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},
'markdown-it-anchor': {
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
},
Self answering: I found the syntax in this post
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
[
'markdown-it-anchor',
{
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
}
],
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},
I have this in a yargs script:
const pkg = require(join(argv.path, 'package.json'));
const exported = require(join(argv.path, pkg.main));
console.log(exported);
If i try to read this source within the yargs script package pkg.main:
import SiteService, { SiteFunction } from 'site-service';
export const siteService = new SiteService('management', {
id: 1000,
othersIds: 1000,
});
export const siteFunction = new SiteFunction(siteService, {
id: 1000,
othersIds: 1000,
});
export default siteService;
The the value of exported is :
{ siteService:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] },
siteFunction:
SiteFunction {
siteService:
SiteService {
name: 'management',
config: [Object],
siteFunctionList: [] },
config: { id: 1000, othersIds: 1000 } },
default:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] } }
If i read the pkg.main of a different module with this content:
import React from 'react';
import Resource from 'ra-core/lib/Resource';
import Route from 'react-router-dom/Route';
import SiteService, { SiteFunction } from 'site-service';
const siteService = new SiteService('management', {
id: 1000,
otherIds: [1, 2],
});
import {
UsersList,
UsersCreate,
UsersEdit,
UsersShow,
} from './resources/users';
export const siteFunction = new SiteFunction(siteService, ({ pages, roles, permissions }) => [
<Resource
name="users"
list={UsersList}
edit={UsersEdit}
create={UsersCreate}
show={UsersShow}
/>,
], ({ pages, roles }) => [
], ({ pages, roles }) => [
{
name: 'management',
redirect: true,
from: '/management',
to: '/',
description: 'management',
},
]);
export default siteFunction;
I have the following output
SiteFunction {
siteService:
SiteService {
name: 'management',
config: { id: 1000, otherIds: [Array] },
siteFunctionList: [] },
config: [Function] }
Both project babel configuration in babel.config.js:
{
only: [
'src',
'styleguide',
],
comments: false,
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
'#babel/preset-react',
],
plugins: [
'babel-plugin-array-includes',
'#babel/plugin-transform-runtime',
'#babel/plugin-transform-async-to-generator',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-syntax-import-meta',
'#babel/plugin-proposal-json-strings',
[
'#babel/plugin-proposal-decorators',
{
legacy: true,
},
],
],
env: {
production: {
plugins: [
'babel-plugin-add-module-exports',
'#babel/plugin-transform-modules-commonjs',
],
},
test: {
plugins: [
'#babel/plugin-transform-modules-commonjs',
'babel-plugin-dynamic-import-node',
],
},
},
}
In both case, the pkg.main imported was in ES6 syntax, while the yargs script run was a ES5 transpiled file.
I believe this is not good, am I correct?
Where does the bug happen? Both projects have the same babel configuration.
Within my script, should I assume both cases can happen and should I support both?