I need to include the following code in a Nuxt 3 project but I can't seem to get it to work:
<script type="text/javascript">
var sc_project=XXXXXXXX;
var sc_invisible=1;
var sc_security="XXXXXXXX";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
In Vue (without Nuxt) there is/was an index.html page that I used to place this code in, but there isn't an index.html file in a Nuxt 3 project anymore.
useHead()
you can use this in your app.vue file's script:
useHead({
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children:
"var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
});
Learn more: https://nuxt.com/docs/getting-started/seo-meta#components
or
app config
use this in your nuxt.config.ts file:
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { dir: "ltr", lang: "en" },
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children: "var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
},
},
Learn more: https://nuxt.com/docs/api/configuration/nuxt-config#head
Components
use <NoScript> and <Script> components in your template:
<template>
<Script :body="true">
var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security="XXXXXXXX";
</Script>
<Script
type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
:async="true"
></Script>
<NoScript :body="true">
<div class="statcounter">
<a
title="Web Analytics Made Easy - Statcounter"
href="https://statcounter.com/"
target="_blank"
><img
class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"
/></a>
</div>
</NoScript>
</template>
Learn more: https://nuxt.com/docs/getting-started/seo-meta#body-tags
the result will be this :
Related
I need multy-regions(different content and pages at regions) and languages. I try use i18n, but i have alot problems with it.
I need structure like this:
/* (default en-EU)
/en-EU/*
/en-US/*
my nuxt.config.js:
seo: true,
parsePages: false,
strategy: 'prefix_and_default',
pages: {
fees: {
'en-US': false,
},
},
locales: [
{
code: 'en-US',
iso: 'en-us',
file: 'en-us.json',
},
{
code: 'en-EU',
iso: 'en-eu',
file: 'en-eu.json',
},
],
defaultLocale: 'en-EU',
langDir: 'locales/',
lazy: true,
and in pages I render my components by name + currentLocale
but i have problems with meta and redirects
when I on page /fees and use landSwitcher it change lang, but not change content because I haven't en-US/fees page(and it not redirect to 404)
<link data-n-head="ssr" data-hid="i18n-alt-en" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en">
<link data-n-head="ssr" data-hid="i18n-alt-en-us" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en-us">
<link data-n-head="ssr" data-hid="i18n-alt-en-eu" rel="alternate" href="https://localhost:5050/fees" hreflang="en-eu">
wtf where he find en? and why it have en-US version? (in config false for this page)
it generate me <html lang="en-eu" /> but its now valid, because EU is not region code
Curious. Is Framework7 really adapted to function with Cordova on a local server? If I run the kitchen sink from npm core, I'm able to navigate through pages and open links. When I create projects with framework7-cli and run cordova run browser, I am unable to trigger opened any page or linked. Is this caused by Webview? Any solution? I've looked into page events but nothing happens and no error in the console.
app.js (with routes)
function initFramework7(){
var $$ = Dom7;
var device = Framework7.getDevice();
var app = new Framework7({
name: 'My App', // App name
theme: 'auto', // Automatic theme detection
el: '#app', // App root element
id: 'io.framework7.ragg', // App bundle ID
// App store
store: store,
//view
view : {
stackPages: true
},
// App routes
routes: [
{
path: '/',
componentUrl: './pages/home.html',
name: 'home',
master(f7) {
return f7.theme === 'aurora';
},
},
{
path: '/about/',
url: './pages/about.html',
name: 'about',
},
{
path: '/messages/',
url: './pages/messages.html',
name: 'messages',
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
],
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
// Input settings
input: {
scrollIntoViewOnFocus: device.cordova && !device.electron,
scrollIntoViewCentered: device.cordova && !device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
// Init cordova APIs (see cordova-app.js)
cordovaApp.init(f7);
}
},
},
});
}
this wont event work (app.main.router returns undefined)
$$('.p').on('click', function(){
app.views.main.router.navigate('/messages/', {reloadCurrent: true});
});
index.html
<body>
<div id="app">
<div class="view">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Scrollable page content -->
<div class="page-content">
preview page content
<a class="p" href="/messages/">messages</a>
</div>
</div>
</div>
</div>
</body>
<!-- Framework7 library -->
<script src="framework7/framework7-bundle.min.js"></script>
<!-- Cordova APIs -->
<script src="js/cordova-app.js"></script>
<script src="cordova.js"></script>
<!--custom app-->
<script src="js/app.js"></script>
pages/messages.html
<div class="view">
<div data-name="messages" class="page">
...Im the messages page
</div>
</div>
I am Building a site using Contentful and have followed different guides and configurations. No matter what I do I can't seem to get a basic example of markdownit working. I keep getting an error:
Property or method "$md" is not defined on the instance but referenced during render.
can't get any examples in the docs working:
https://openbase.com/js/#nuxtjs/markdownit
I have even deleted the whole template and tried simple versions. I have also tried different set ups in the config file below.
I have run 'yarn build', 'yarn add markdown-it'
and neither seem to have helped
here is what I am trying to get to work eventually:
<article v-html="$md.render(post.fields.body)"></article>
This is one example I am following and it seems to be working here on the live demo:
https://github.com/sdras/contentful-nuxt-netlify/blob/e80e6552eef812320a7bd2dd66ad3fa8ebf5f840/pages/_slug.vue
In context - pages/_id/index.vue
<template>
<div class="post-component">
<a #click="$router.go(-1)">Go back to overview</a>
<hr />
<h1>{{post.fields.title}}</h1>
<p></p>
<p>
{{post.fields.body}}
</p>
<article v-html="$md.render(post.fields.body)"></article>
</div>
</template>
<script>
import {createClient} from '../../plugins/contentful';
const contentfulClient = createClient();
export default {
name: 'index',
asyncData ({ env, params }) {
return contentfulClient.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
'fields.slug': params.id
}).then(post => {
return {
post: post.items[0]
}
}).catch(console.error)
}
}
</script>
nuxt.config.js
const config = require('./.contentful.json')
module.exports = {
// ...
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
}
// ...
}
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'thomasulman',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ 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: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'nuxt-buefy',
"#nuxtjs/markdownit"],
markdownit: {
runtime: true, // Support `$md()`
injected: true,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
package.json
{
"name": "******",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/markdownit": "^1.2.10",
"contentful": "^8.4.2",
"core-js": "^3.15.1",
"markdown-it": "^12.1.0",
"nuxt": "^2.15.7",
"nuxt-buefy": "^0.4.8"
},
"devDependencies": {}
}
just in case it helps:
index.vue
<template>
<div>
<!-- <Navigation /> -->
<!-- render data of the person -->
<h1>{{ person.fields.name }}</h1>
<!-- render blog posts -->
<ul>
<li v-for="post in posts">
{{ post.fields.title }}
<nuxt-link :to="post.fields.slug" class="more">Read more ⟶</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData({ env }) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
}).catch(console.error)
}
}
</script>
I've achieved to make it work properly as shown here: https://github.com/nuxt-community/markdownit-module#usage
I've added a proper HTML sanitizer too, check the plugins directory.
You can find the working Github repo here: https://github.com/kissu/so-nuxt-markdownit
This configuration was enough so far for me
nuxt.config.js
plugins: [
'~/plugins/vue-dompurify'
],
modules: [
'#nuxtjs/markdownit'
],
markdownit: {
runtime: true, // Support `$md()`
// preset: 'default',
// linkify: true,
// breaks: true,
// use: [
// 'markdown-it-div',
// 'markdown-it-attrs'
// ]
}
And those 2 files are working properly
index.vue
<template>
<div>
<div v-dompurify-html="$md.render(model)"></div>
<br/>
<br/>
<div v-dompurify-html="testMarkdownContent"></div>
<nuxt-link to="/inline">Inline markdown working too!</nuxt-link>
</div>
</template>
<script>
import testMarkdown from '../blog/test.md'
export default {
data() {
return {
model: '# Hello World!'
}
},
computed: {
testMarkdownContent() {
return testMarkdown
}
}
}
</script>
inline.vue
<template lang="md">
# Hello World!
Current route is: {{ $route.path }}
<nuxt-link to="/">Back to index</nuxt-link>
</template>
The issue with the whole thing was that // module.exports {} was overwriting the export default {} in the config file.
I am new to NuxtJs. I wanted to test how nuxt-link works so I intentionally put a nuxt-link to a route that doesn't work hoping to get redirected to the default 404 page. I put this line the pages/index.vue file:
<nuxt-link to='/asksdkjd'>ssss</nuxt-link>
And it displays in chrome like this:
After I click the link I get these error in console:
ReferenceError: NuxtError is not defined
at Vue.errorChanged (App.js?efe7:173)
at Watcher.run (vue.runtime.esm.js?2b0e:4568)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)
vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "nuxt.err"
(found in <Root>)
Here's the error screenshot
This error shows when I am redirected to the link because you can see the invalid link in the url bar. It doesn't render the default 404 page.
But When I hit refresh, I can then see the 404 page(sceenshot).
Here's my nuxt.config.js file which was generated when I installed this fresh project.(I ommited the comments.)
export default {
mode: 'universal',
target: 'static',
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' }
]
},
css: [
],
plugins: [
],
components: true,
buildModules: [
],
modules: [
],
build: {
}
}
I have been googling for this error for quite a while but couldn't find anything. I also tried in firefox but the same issue is happening. Hope you guys can help. Thanks in advance.
define your error page.
create this file: layouts/error.vue
<template>
<div class="container">
<div v-if="error.statusCode === 404">
<h1>Page not found</h1>
<p>{{ error.message }}</p>
</div>
<div v-else>
<h1>An error occurred</h1>
</div>
<n-link to="/">Home page</n-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'default' // If you prefers you can set a custom layout for the error page
}
</script>
More info: check the nuxt docs about error page
I am new to extJS and met a serious problem described as follows:
I used the Sencha Architect to build my client-side UI. After finishing it, I copy the generated app folder and app.js to my asp.net mvc project(located in ROOT/Scripts/app and ROOT/Scripts/app.js), and I also copy some dependencies(exr-all.js .etc) from the SDK directory to ROOT/Scripts/extjs.I was using Ext.Loader.setPath() method in my ROOT/Scripts/app.js file to indicate the mapping from specific class name to the specific location, but It does not work.
In my asp.net mvc project, I have a controller class and the Index action method just return a View(ROOT/Views/RepairList/Index.cshtml) whose code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RepairList</title>
<script type="text/javascript" src="../../Scripts/extjs/ext-all.js"></script>
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Scripts/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../Scripts/app.js">
</script>
</head>
<body>
</body>
</html>
In my ROOT/Scripts/app.js, the code is as follows:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('repairList', '../../Scripts/app');
Ext.application({
name:'RepairList',
requires: [
'Ext.Loader'
],
models: [
'LineChart',
'RadarChart'
],
stores: [
'MenuStore',
'LineChart',
'RadarChart'
],
views: [
'MainEntry',
'chartPanel'
],
controllers: [
'management',
'forms',
'Info',
'content'
],
name: 'repairList',
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});
I dont know why the setPath does not work. I think it is because the view file is in ROOT/Views/RepairList/Index.cshtml, while the app.js and the app directory is in ROOT/Scripts/app. Moreover, the name of my class generated in the sencha architect is repairlist.model.foo while now they were placed under Scripts folder instead of a directory named repairlist.
//the file is in the original repairlist/app/view/MainEntry.js file when creating in the sencha architect while now I copy it in the ROOT/Scripts/app/view/MainEntry.js
Ext.define('repairList.view.MainEntry', {
extend: 'Ext.container.Viewport',
alias: 'widget.fillerentry',
requires: [
'repairList.view.headerPanel',
'repairList.view.treeMenu',
'repairList.view.contentPanel',
'Ext.tree.Panel',
'Ext.tab.Panel'
],
margin: 0,
layout: {
type: 'border',
padding: 0
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'repairheader',
region: 'north'
},
{
xtype: 'repairtree',
region: 'west'
},
{
xtype: 'repaircontent',
region: 'center'
}
]
});
me.callParent(arguments);
}
});
![enter image description here][1]

the error message is as follows
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:27845/app/view/MainEntry.js?_dc=1434385119180 ......
![enter image description here][2]
could anyone tell me why this does not work? Thanks very much
Two things:
1 - You have set the name config in your application twice.
2 - When using Ext.application set your paths in the paths config.
Ext.application({
name: 'repairList',
paths : {
'repairList' : '../../Scripts/app'
},
//...
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});