I am trying to load the mapboxgl stylesheet in my Nuxt 3.0.0-rc.8 app. Typically with a Vue projec I manually add it to the head of the index.html page.
However, that is not how you do in Nuxt 3 apparently. I've tried adding it to the head and css options in the nuxt.config.ts file, but neither got me there. I did notice that when I added it to the css array, it was added to my header but 'https://' was replaced with '_nuxt'.
I know I am missing something simple. Here is my config file:
export default defineNuxtConfig({
css: [
'~/assets/css/main.css',
],
build: {
postcss: {
postcssOptions: require('./postcss.config.js'),
},
},
buildModules: ['#pinia/nuxt'],
runtimeConfig: {
treesAPIKey: '',
public: {
baseURL: '',
mapToken: '',
},
},
head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] },
});
Use app.head instead of head.
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
app: {
head: {
link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }]
}
}
})
Related
what do I need to prescribe in order to enable pwa?
when i do "Analyze page load", I get information that
pwa is disabled.
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
injectRegister: 'auto',
}),
],
})
Are you running in dev by any chance?
If you want to check it in dev, add the devOptions option to the plugin configuration
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true
}
})
]
})
Typically the configuration I use in my projects is always more or less this:
VitePWA({
includeAssets: ["favicon.ico", "apple-touch-icon.png", "logo.svg"],
manifest: {
name: "Name App",
short_name: "Short Name",
description: "Description",
theme_color: "#ffffff",
icons: [
{
src: "pwa-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
},
],
},
})
I am using Nuxt 3 RC and based on this video and this so solution, I am trying to load the library splitting.js to Nuxt.
After following the steps I am still getting the following error
Uncaught (in promise) ReferenceError: Splitting is not defined
This is my nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
head: {
title: "Nuxt RC 3",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "Nuxt.js project" },
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://unpkg.com/splitting/dist/splitting.css",
},
{
rel: "stylesheet",
href: "https://unpkg.com/splitting/dist/splitting-cells.css",
},
],
script: [
{
src: "https://unpkg.com/splitting/dist/splitting.min.js",
type: "text/javascript",
},
],
},
css: [
'~/assets/css/main.css'
],
plugins: [
]
});
After moving the code to the layouts/default.vue layout, it's working, is there any specific reason why its not working when applied to the nuxt.config.ts file?
Installing it via NPM
npm i splitting
Then importing it like that
import "splitting/dist/splitting.css"
import "splitting/dist/splitting-cells.css"
import Splitting from "splitting"
Splitting()
fixed the issue.
It's recommended on pretty much every aspect to use an NPM package anyway (on modern frameworks).
Here is a more detailed explanation regarding Nuxt2 libraries, there may be some equivalent or similar approaches overall.
I had problem with meta in nuxt.js app. I want to fill dynamic meta tags in one detail page
--pages
----event
-----_id.vue
When I navigate on web site via link all work great. But if I just refresh page, meta tags use value from nuxt.config.js. For instance I got 'SiteTitle Nuxt.config.js' instead of 'SiteTitle - Some event title'.
Nuxt version 2.15.3
nuxt.config.js
export default {
head: {
titleTemplate: '%s - SiteTitle',
title: 'SiteTitle Nuxt.config.js',
htmlAttrs: {
lang: 'en'
},
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{hid: 'description', name: 'description', content: ''}
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
}
components: true,
buildModules: [
'#nuxt/typescript-build',
'#nuxtjs/vuetify',
],
modules: [`enter code here`
'#nuxtjs/axios'
],
vuetify: {
customVariables: ['~/assets/variables.scss'],
},
axios: {
baseURL: 'https://api.someurl.com',
}
}
And _id.vue file
<template>
<v-card class="mt-6 mb-5" outlined>
<v-card-title>{{ model.title }}</v-card-title>
</v-card>
</template>
<script lang="ts">
import {Component, Vue} from "nuxt-property-decorator"
import {EventModel} from "~/api/models/EventModel";
import EventApi from "~/api/EventApi";
#Component({
async asyncData({params, $axios}) {
const eventApi = new EventApi($axios)
const model = await eventApi.get(parseInt(params.id))
return { model: model };
},
head(this: EventPage): object {
return {
title: "SiteTitle - " + this.model.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.model.shortDescription
}
]
}
},
})
export default class EventPage extends Vue {
model = {} as EventModel
async fetch() {
}
}
</script>
I tried to call api in fetch, in this case meta values always have valid value when I refresh page, but Facebook Sharing Debugger get meta from nuxt.config.js in this case, and this solution is not suitable
Thanks for your help
You can do one thing
Create one plugin in that you can use this on router.beforeEach like this:
app.router.beforeEach(async(to, _, next) => {
document.title = to.meta.pageTitle ? ('Specify title - ' + ${to.meta.pageTitle}) :'Default Title';
})
In your router file you can do something like this:
{
path: '/path',
name: 'Name',
component: Component,
meta: {
pageTitle: 'Change Password'
}
}
My app works perfectly in dev mode, however I'm facing issues in the production environment.
My Folder Structure is like this pages > widget > _id.vue
For testing I just put a h1 tag in _id.vue file, when I run enter the url - https://app.mydomain.com/widget/xyz I get 404 errors on all files.
https://app.mydomain.com/widget/hhhhh 404
https://app.mydomain.com/_nuxt/dist/bf9e34c.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/eb32a87.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/cc2d21b.js net::ERR_ABORTED 404
Here is my apps nuxt.config.js file code, unable to figure out what's the issue here:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
server: {
port: 8000 // default: 3000
},
target: 'server',
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ href: '../assets/styles/style.css' }, { href: '../assets/styles/videoform.css' }, { href: '../assets/styles/tailwind-responsive.css' }, { href: '../assets/styles/tailwind-components.css' }
],
script: [
{ src: 'https://js.stripe.com/v2/' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
// <style>
// #import '../../assets/styles/style.css';
// #import '../../assets/styles/videoform.css';
// #import '../../assets/styles/tailwind-responsive.css';
// #import '../../assets/styles/tailwind-components.css';
// </style>
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: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/composition-api'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
buildDir: '_nuxt',
build: {
publicPath: '_nuxt/dist/'
}
}
When requesting those script files, nuxt uses the build.publicPath to find them. Your buildDir path tells nuxt to save the build files in _nuxt, while your build.publicPath tells nuxt that those files are located in _nuxt/dist. That's why you get a 404.
You can change the build.publicPath to match the buildDir to fix this. Or change the buildDir instead.
Nuxt Docs
Finally I figured out the problem, it was due to nginx configuration.
There was a trailing slash for the reverse proxy http://localhost:8000/
I had to remove that to fix the issue - http://localhost:8000
I have js file called script.js in assets/js. Tried to include in nuxt.config.js like below:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: '/assets/js/script.js', ssr: false }
]
}
But getting 'GET http://127.0.0.1:3000/assets/js/script.js 404 (OK)'.
Simply keep your script.js file into static folder, because static folder treat as root folder.
and add the path into nuxt.config.js configuration file like below
script: [
{ src: '/script.js'}
]
here is the best way that worked for me
put your script.js file in plugins folder and then go and include it in nuxt.config.js
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/script.js'
],
remember that # in nuxt.js or vue.js means root folder
In this method, your js files must be in the path static folder
and add this code to you *.vue files you want to use
export default {
head() {
return {
link: [
{
rel: "stylesheet",
href:
"/assets/css/bootstrap.css"
},
],
script: [
{
src: "assets/js/bootstrap.js",
body: true
},
],
}
}