I am facing some issue loading 3rd party script and stylesheets in Vuepress. It's not showing error after adding it to head section of the front matter but I'm not able to access any of the UIkit class or make http calls. Newbie to Vue and Vuepress. Am I missing something?
head: [
['link', { rel: 'stylesheet', href: `https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css` }],
['script',{ src: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit.min.js' }],
['script',{ src: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit-icons.min.js' }],
['script',{ src: 'https://cdn.jsdelivr.net/npm/vue-resource#1.5.1' }]
],
You just have to re-run the build command:
npm run docs:dev
Related
I would like to use preinstalled node components in Vuepress (if possible).
Let's say for example I like the following open source framework:
link
And I install it in my Vuepress project
npx create-vuepress-site
cd docs
npm install
npm run dev
npm install #telekom/scale-components#next
Further I add in my config.js the following code in order to use the components:
head: [
['link', { rel: 'stylesheet', href: './node_modules/#telekom/scale-components/dist/scale-components/scale-components.css' }],
['script', { type: 'module', src: './node_modules/#telekom/scale-components/dist/scale-components/scale-components.esm.js' }]
],
I would now assume that I could simply use the components, e.g.
<div>
<scale-button>Click!</scale-button>
</div>
Unfortunately through, it just returns plain text.
Is there a step in between that I am missing?
I have a simple Nuxt ssr app with a serverMidlleware handling one api endpoint (/api/contact). To deploy the app I am using pm2.
Running the app in development and in production (locally without pm2) everything works fine. Deploying it on a basic ubuntu server using pm2, the api endpoint becomes unreachable (404 not found).
As pointed out here, the middleware is not included in the .nuxt build. So, I made sure to copy the api directory (where my middleware is located) too.
for pm2 deployment, ecosystem.config.js:
module.exports = {
apps: [
{
name: 'App',
exec_mode: 'cluster',
instances: 'max',
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
and inside nuxt.config.js:
serverMiddleware: [
{ path: '/api/contact', handler: '~/api/contact.js' }
]
As only the deployment via pm2 fails, I assume the other files are not of interest. I am assuming this must be related to some sort of pm2 config to find the api folder.
Following my answer here solved the issue here too.
You probably had something missing in your nuxt.config.js file
export default {
ssr: true,
target: 'server',
modules: [
'#nuxtjs/axios',
],
serverMiddleware: [
{ path: '/api', handler: '~/server-middleware/rest.js' },
],
}
According to the doc Docs It was recommended to use the modularized antd in order to ensure optimization and reduce the app size. However, I tried using the exact code in my nuxt build config but the app size remains the same before and after build using yarn build
Below is my nuxt build config and the screenshot to the before and after build
build: {
analyze: true, // Remove this mode before deployment
babel: {
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css"
},
]
]
}
}
Here is the build before and after adding the babel-import-plugin
i just got this fixed and reduced the size drastically to this by only removing the ant-design plugin from the nuxt config.
Initially my plug look something like this
plugins: [
"#/plugins/antd-ui",
{ src: "#/plugins/vue-carousel", ssr: false }
// "#/plugins/axios"
],
Then I removed the plugin to have something like this
plugins: [
{ src: "#/plugins/vue-carousel", ssr: false }
// "#/plugins/axios"
],
Now i have this minimal size
Now I hava a vuepress project,
I am trying to use google analytic to track the flow of it.
But it seems there are some problem between my project and google analytic
I already follow the Document Guide(
https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html)
to use yarn add -D #vuepress/plugin-google-analytics
rather than npm install -D #vuepress/plugin-google-analytics
and also add the plugin to my config
plugins: [
'vuepress-plugin-mathjax',
{
target: 'svg',
macros: {
'*': '\\times',
},
},
'latex',
'#vuepress/google-analytics',
{
'ga': 'UA-157347770-2',
}
],
But it still nothing catch by google analytics.
Is there anyone has the same problem or similiar one before?
Thanks for anyone read
The declaration of plugin is wrong.
You have two options to declare the plugin: Babel Style or Object Style.
Babel style:
module.exports = {
plugins: [
['#vuepress/plugin-google-analytics', { ga: 'XX-000000000-0' }],
],
};
Object style:
module.exports = {
plugins: {
'#vuepress/plugin-google-analytics': {
ga: 'XX-000000000-0',
},
},
};
For more details, please see the documentation: https://vuepress.vuejs.org/plugin/using-a-plugin.html#babel-style
I have made a website using NUXT that needs SEO
When I use www.xml-sitemaps.com website to see if it can find all my pages, it only finds the home page, and none of the other routes. When I try other NUXT demo websites it finds them all.
My robots.txt file looks like:
User-agent: *
Disallow: /profile/
Sitemap: https://www.example.com/sitemap.xml
I am using #nuxtjs/sitemap to generate the sitemap.xml that ends up looking something like this:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url> <loc>https://www.example.com/about</loc> </url>
<url> <loc>https://www.example.com/</loc> </url>
</urlset>
And if this helps, my nuxt.config.js looks like:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Title' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
mode: 'spa',
loading: { color: '#3B8070' },
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
css: [
'~/assets/main.css'
],
modules: [
'#nuxtjs/pwa',
[
'#nuxtjs/sitemap', {
generate: true,
hostname: 'https://www.example.com',
exclude: [
'/profile'
]
}
]
],
plugins: [
'~/plugins/uikit.js',
'~/plugins/fireauth.js'
],
manifest: {
name: 'Title',
lang: 'en'
},
router: {
middleware: 'router-auth'
},
vendor: [
'firebase',
'uikit'
]
}
I'm the creator of the nuxt sitemap module.
Your sitemap-module configuration is set in the wrong section.
Please, update your nuxt.config.js:
modules: ['#nuxtjs/pwa', '#nuxtjs/sitemap'],
sitemap: {
generate: true,
hostname: 'https://www.example.com',
exclude: [
'/profile'
]
},
plugins: [
Then run npm run generate.
Finally check your generated sitemap.xml in the \dist\ folder.
(If you have an other issue or question, you may open an issue on github project: https://github.com/nuxt-community/sitemap-module/issues)
It's important to understand what's going on with different Nuxt.js modes. Read the explanation about server side rendering in the Nuxt.js Guide, where they explain the difference between the three modes the framework can be configured to work in:
Universal (with server side rendering, so that when any page is rendered, that page will be served with all HTML rendered (SEO and crawler friendly mode)
SPA (Single Page Application) which will serve up the HTML skeleton together with css and javascript bundles, which will only be unbundled to create the initial DOM in the browser. Cool for intranet apps, bad for SEO.
Static generation of all pages (pre-rendering) so that the site can be served up in any shared hosting as simple HTML.
Once the concepts are clear, you can try changing the "mode" property in your Nuxt.js configuration file from "SPA" to "Universal", together with the other suggestion regarding xml sitemap configuration in the same nuxt.config.js file.
Additionally, you can try out and learn about different configurations by either using:
The Nuxt.js starter template discussed in the Installation Guide.
Something like Create Nuxt App that, once installed via npm install -g create-nuxt-app allows you to see how many different configurations are automatically set up for you.
Since you are in SPA mode you will not get much success with SEO, if you can run in universal mode then you will see full benefit of nuxt/vue.
See this website I did with Nuxt in universal mode.