I have created a simple Nuxt 3 web app to test some libraries (i18n, VueUse, nuxt-viewport). This web app uses a firebase functions for SSR and I followed the instructions from the next Medium article: (https://chrlschn.medium.com/nuxt-3-with-ssr-on-google-cloud-firebase-functions-2023-b80f7c4d4b4d
My package.json file:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"engines": {
"node": ">=18.17.0"
},
"overrides": {
"vue": "latest"
},
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"deploy-fb": "npm run build && cd .output/server && npm install --only=production && cd ../.. && npm run postinstall && npx firebase deploy",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"firebase": "^10.12.3",
"firebase-admin": "^12.2.0",
"firebase-functions": "^5.0.1",
"@nuxtjs/i18n": "^8.3.1",
"@pinia/nuxt": "^0.5.1",
"@vueuse/core": "^10.10.0",
"@vueuse/nuxt": "^10.10.0",
"nuxt": "^3.11.2",
"nuxt-viewport": "^2.1.5",
"pinia": "^2.1.7",
"vue": "^3.4.27",
"vue-router": "^4.3.2"
},
"devDependencies": {
"autoprefixer": "^10.4.19",
"nuxt-icon": "^0.6.10",
"postcss": "^8.4.38",
"sass": "^1.77.4"
}
}
My nuxt.config.ts file:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-07-09',
devtools: { enabled: false },
modules: [
"@pinia/nuxt",
"@vueuse/nuxt",
"@nuxtjs/i18n",
"nuxt-viewport"
],
app: {
head: {
charset: 'utf-16',
viewport: 'width=device-width, initial-scale=1',
title: 'Nuxt 3 app',
meta: [
{ name: 'description', content: 'Nuxt 3 SSR + Firebase Funcions & Admin SDK' },
{
name: 'keywords',
content: 'Nuxt.js, JavaScript, Firebase Functions, Firebase Admin SDK, web development.',
}
],
link: [
{ rel: 'shortcut icon', href: './favicon.ico' },
{ rel: 'icon', type: 'image/x-icon', href: './favicon.ico' },
],
},
},
css: ['~/assets/style/main.scss'],
postcss: {
plugins: {
autoprefixer: {},
},
},
pinia: {
autoImports: ['defineStore', ['defineStore', 'definePiniaStore']]
},
i18n: {
locales: [
{ code: 'en', iso: 'en-US', name: 'English' },
{ code: 'ru', iso: 'ru-RU', name: 'Русский' }
],
defaultLocale: 'en', // default locale of your project for Nuxt pages and routings
vueI18n: './i18n.config.ts', // if you are using custom path, default
},
viewport: {
// nuxt-viewport: https://nuxt.com/modules/nuxt-viewport
breakpoints: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536,
},
defaultBreakpoints: {
desktop: 'lg',
mobile: 'xs',
tablet: 'md',
},
fallbackBreakpoint: 'lg',
},
experimental: {
// enable server components:
componentIslands: true
},
vite: {
vue: {
script: {
defineModel: true,
propsDestructure: true,
},
},
/*
server: {
headers: {
'access-control-allow-origin': '*',
},
},
*/
},
nitro: {
firebase: {
nodeVersion: '18',
gen: 2,
},
preset: "firebase"
},
})
app.vue:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useNuxtApp } from '#app'
// https://nuxt.com/modules/nuxt-viewport
const nuxtApp = useNuxtApp()
const { $viewport } = nuxtApp
// Define the layoutClass ref
const layoutClass = ref('')
// Function to update the layout class based on the breakpoint
const updateLayoutClass = (breakpoint) => {
const breakpointClasses = {
xs: 'xs',
sm: 'sm',
md: 'md',
lg: 'lg',
xl: 'xl',
'2xl': 'xxl'
}
layoutClass.value = breakpointClasses[breakpoint] || ''
}
// Watch for breakpoint changes and update the layout class accordingly
watch($viewport.breakpoint, (newBreakpoint) => {
updateLayoutClass(newBreakpoint)
})
// Initial check for current breakpoint
onMounted(() => {
updateLayoutClass($viewport.breakpoint.value)
})
</script>
<template>
<div class="default-layout" :class="layoutClass">
<main class="container">
<NuxtPage />
</main>
<CookieBanner />
</div>
</template>
<style scoped lang="scss">
.default-layout {
.container {
padding: 2rem;
}
&.xs {
.container {
display: flex;
flex-direction: column;
padding: 0.5rem;
}
}
}
</style>
pages/index.vue
<script setup>
const { t, setLocale } = useI18n()
const title = ref('Nuxt 3 SSR + Firebase Funcions & Admin SDK')
const description = ref('My App Description')
definePageMeta({
layout: "default"
})
useHead({
title,
meta: [{
name: 'description',
content: description
}]
})
</script>
<template>
<div>
<h1>{{ $t('home') }}</h1>
<p>{{ $t('welcome') }}</p>
<br />
<hr />
<br />
<h2>Nuxt 3 SSR + Firebase Funcions & Admin SDK</h2>
<p>
<button @click="setLocale('en')">en</button>
<button @click="setLocale('ru')">ru</button>
</p>
<br />
<ThemeSwitcher />
</div>
</template>
There is one more page pages/privacy-policy.vue but it has only formatted text inside.
components/ThemeSwitcher.vue
<template>
<button
@click="toggleColorMode"
class="theme-switcher"
>
<component :is="colorMode === 'dark' ? MoonIcon : SunIcon" class="icon" />
</button>
</template>
<script setup>
import { useColorMode } from '@vueuse/core'
import SunIcon from '~/components/icon/Sun.vue'
import MoonIcon from '~/components/icon/Moon.vue'
const emit = defineEmits(['colorModeChanged'])
const colorMode = useColorMode()
const toggleColorMode = () => {
colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
emit('colorModeChanged', colorMode.value)
}
</script>
<style scoped>
.theme-switcher {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
}
.icon {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
}
</style>
components/CookieBanner.vue
<template>
<div v-if="!cookieConsentGiven" class="cookie-banner">
<p>
{{ $t('cookieWarning') }}
<a href="/privacy-policy">{{ $t('learnMore') }}</a>
</p>
<button @click="acceptCookies">{{ $t('accept') }}</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useLocalStorage } from '@vueuse/core';
import { useCookieStore } from '../stores/cookieStore';
const { t } = useI18n();
const cookieConsentGiven = ref(false);
const cookieConsent = useLocalStorage('cookieConsent', null);
// Using a Pinia store to manage cookie state
const cookieStore = useCookieStore();
onMounted(() => {
// Check if cookie consent is already given
if (cookieConsent.value === 'accepted') {
cookieConsentGiven.value = true;
cookieStore.setCookieConsent(true);
}
});
const acceptCookies = () => {
// Set localStorage and state to reflect cookie consent
cookieConsent.value = 'accepted';
cookieConsentGiven.value = true;
cookieStore.setCookieConsent(true);
};
</script>
<style scoped>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--inverted-bg-color);
color: var(--text-inverted-primary-color);
border-top: solid 1px var(--gray-color);
text-align: center;
padding: 10px;
z-index: 1000;
}
.cookie-banner p {
margin: 0;
padding: 0;
}
.cookie-banner a {
color: var(--nav-link-active-color);
}
.cookie-banner button {
margin-left: 10px;
padding: 5px 10px;
background-color: var(--primary-color);
color: var(--white-color);
border: none;
cursor: pointer;
}
</style>
server/utils/firebaseServer.js
// https://firebase.google.com/docs/reference/admin
import { initializeApp, cert, getApps } from 'firebase-admin/app';
import serviceAccount from './service-account.json';
export default function firebaseServer() {
if (getApps().length === 0) {
initializeApp({
credential: cert(serviceAccount),
});
}
}
firebase.json file:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": [
{
"source": ".output/server",
"runtime": "nodejs18",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log",
"*.local"
]
}
],
"hosting": {
"public": ".output/public",
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"function": "server"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"functions": {
"port": 3600
},
"firestore": {
"port": 8080
},
"hosting": {
"port": 3500
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true,
"port": 4000
},
"singleProjectMode": true
}
}
I have received a next email with warning and I have sent my appeal and I received the same email again which says I have fishing content on the main/index page. If the Google Firebase is not fishing the user data, I don’t know who did it.. In any case I don’t know what to do with that, I can leave it but I would like to know how to fix such issues and what the cause of such issues.
Action required: Critical problem with your Google Cloud Platform /
API… We have recently detected that your Google Cloud Project
[NUXT_PROJECT_NAME] (id: [NUXT_PROJECT_NAME]) has been hosting content
that appears to be phishing and violating our Terms of Service. Based
on our investigation the phishing content is located at the following
location(s).Site Name: [NUXT_PROJECT_NAME] Url(s): [NUXT_PROJECT_NAME] We will
suspend all impacted Url(s) in 24 hours unless you correct the problem
and respond to this email by submitting an appeal. Please note that
you should be logged in as the project owner to access the appeals
page.
I have added the next fields in firebase.json file and deployed on firebase and now the project can be open in browsers but the next warning is still visible in Google Cloud console. I have sent a new Appeal with asking to review my code.
A potential violation of our Acceptable Use Policy has been detected
for a project you own.
"hosting": {
"public": ".output/public",
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"function": "server"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
},
{
"key": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains; preload"
},
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "X-Frame-Options",
"value": "DENY"
},
{
"key": "X-XSS-Protection",
"value": "1; mode=block"
},
{
"key": "Referrer-Policy",
"value": "no-referrer-when-downgrade"
},
{
"key": "Permissions-Policy",
"value": "geolocation=(), microphone=(), camera=()"
}
]
},
{
"source": "/static/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
}
],
"redirects": [
{
"source": "/old-path",
"destination": "/new-path",
"type": 301
}
],
"i18n": {
"root": "/"
}
},
0