I have no idea how or why this is happening.
In my vue.config.js file I have this setup:
pwa: {
name: "Example",
themeColor: "#081d4d",
backgroundColor: "#FFFFFF",
assetVersion: Date.now(),
workboxOptions: {
exclude: [
/web\.config$/,
],
},
manifestOptions: {
icons: [{
src: "assets/icons/android-icon-36x36.png",
sizes: "36x36",
type: "image/png",
},
{
src: "assets/icons/android-icon-48x48.png",
sizes: "48x48",
type: "image/png",
},
{
src: "assets/icons/android-icon-72x72.png",
sizes: "72x72",
type: "image/png",
},
{
src: "assets/icons/android-icon-96x96.png",
sizes: "96x96",
type: "image/png",
},
{
src: "assets/icons/android-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "assets/icons/android-icon-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "assets/icons/apple-icon-57x57.png",
sizes: "57x57",
type: "image/png",
},
{
src: "assets/icons/apple-icon-60x60.png",
sizes: "60x60",
type: "image/png",
},
{
src: "assets/icons/apple-icon-72x72.png",
sizes: "72x72",
type: "image/png",
},
{
src: "assets/icons/apple-icon-76x76.png",
sizes: "76x76",
type: "image/png",
},
{
src: "assets/icons/apple-icon-114x114.png",
sizes: "114x114",
type: "image/png",
},
{
src: "assets/icons/apple-icon-120x120.png",
sizes: "120x120",
type: "image/png",
},
{
src: "assets/icons/apple-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "assets/icons/apple-icon-152x152.png",
sizes: "152x152",
type: "image/png",
},
{
src: "assets/icons/apple-icon-180x180.png",
sizes: "180x180",
type: "image/png",
},
{
src: "assets/icons/favicon-16x16.png",
sizes: "16x16",
type: "image/png",
},
{
src: "assets/icons/favicon-32x32.png",
sizes: "32x32",
type: "image/png",
},
{
src: "assets/icons/favicon-96x96.png",
sizes: "96x96",
type: "image/png",
},
{
src: "assets/icons/favicon-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "assets/icons/ms-icon-70x70.png",
sizes: "70x70",
type: "image/png",
},
{
src: "assets/icons/ms-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "assets/icons/ms-icon-150x150.png",
sizes: "150x150",
type: "image/png",
},
{
src: "assets/icons/ms-icon-310x310.png",
sizes: "310x310",
type: "image/png",
},
],
},
},
And my index.html only has this reference to favicon:
<link rel="icon" href="<%= BASE_URL %>favicon.ico?v=1519211809934">
But for some reason whenever I build my application I see this:
Does anyone know where they are coming from? I can't find anything anywhere talking about it :(
It's part of the pwa.iconPaths config. You can either put correctly sized icons at img/icons/favicon-32x32.png and img/icons/favicon-16x16.png or update your config to override the default.
pwa: {
name: "Example",
themeColor: "#081d4d",
backgroundColor: "#FFFFFF",
favicon32: 'img/icons/favicon-32x32.png',
favicon16: 'img/icons/favicon-16x16.png',
appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
maskIcon: 'img/icons/safari-pinned-tab.svg',
msTileImage: 'img/icons/msapplication-icon-144x144.png'
}
Ideally you should implement all five icons so default icons are not used on other platforms unexpectedly.
Related
I'm new to using nuxt js. I'm currently having problem running the project and kept get an error like the above. I already copy the content from .env example and make .env file. Is this have the correlation with the API Base url? I used the same api base url like before and works just fine but suddenly i get these error.
Here is my nuxt.config.js
require("dotenv").config();
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: "Reqruit",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
hid: "description",
name: "description",
content: "Reqruitasia website",
},
{
name: "theme-color",
content: "#015f92",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "preconnect",
href: "https://fonts.googleapis.com",
},
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400&display=swap",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined",
},
],
},
router: {
middleware: "route-history",
},
/*
** Customize the progress-bar color
*/
loading: { color: "#015f92" },
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ["~/assets/scss/main.scss"],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: "~/plugins/axios" },
{ src: "~/plugins/filters" },
{ src: "~/plugins/mixins/user" },
{ src: "~/plugins/mixins/validation" },
{ src: "~/plugins/vuelidate" },
{ src: "~/plugins/mixins/swal" },
{ src: "~/plugins/bus" },
{ src: "~/plugins/vue-select", ssr: false },
{ src: "~/plugins/mixins/axios-error" },
{ src: "~/plugins/jsonld" },
{ src: "~/plugins/dayjs", ssr: false },
{ src: "~/plugins/silentbox" },
{ src: "~/plugins/sticky-sidebar", ssr: false },
{ src: "~/plugins/smooth-scroll", ssr: false },
{ src: "~/plugins/money", ssr: false },
{ src: "~/plugins/keyboard-detector", ssr: false },
{ src: "~/plugins/nl2br", ssr: false },
{ src: "~/plugins/job-card", ssr: false },
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: ["#nuxtjs/pwa"],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
"#nuxtjs/axios",
"#nuxtjs/pwa",
"#nuxtjs/dotenv",
"#nuxtjs/style-resources",
"#nuxtjs/auth",
"vue-sweetalert2/nuxt",
"#nuxtjs/sitemap",
"#nuxtjs/robots",
],
manifest: {
name: "Reqruit",
short_name: "Reqruit",
lang: "id",
display: "standalone",
},
styleResources: {
// your settings here
scss: ["~assets/scss/abstracts/_variables.scss"],
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {
baseURL: process.env.API_BASE_URL,
},
auth: {
redirect: {
login: "/auth/login",
logout: "/auth/login",
callback: "/auth/login",
home: "/account/edit-profile",
},
strategies: {
local: {
endpoints: {
login: {
url: "/login",
method: "post",
propertyName: "token",
},
logout: { url: "/logout", method: "post" },
user: {
url: "/user-data",
method: "get",
propertyName: "data",
},
},
},
},
},
pageTransition: {
name: "page",
mode: "out-in",
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
optimization: {
splitChunks: {
chunks: "async",
},
},
splitChunks: {
pages: true,
vendor: true,
commons: true,
runtime: true,
layouts: true,
},
extend(config, ctx) {},
standalone: true,
},
};
and here is my .env file
API_BASE_URL=http://phplaravel-568017-1969050.cloudwaysapps.com/api
BACKEND_BASE_URL=http://phplaravel-568017-1969050.cloudwaysapps.com
APP_BASE_URL=http://localhost:3000
EMPLOYER_BASE_URL=http://localhost:3001
NUXT_PORT=3000
APP_MODE=staging
I've set the mode to static and ran npm run generate. The site is being served from the /dist/ directory, but where is the markup when I view the source? view-source:https://eosnomad.com/
I don't think I'm getting the SEO benefits here since Google doesn't see HTML. I only see the source code when looking in dev tools. Am I doing this wrong?
Here is my nuxt configuration:
export default {
target: 'static',
head: {
title: process.env.DOMAIN,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content:
process.evn.CONTENT,
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: [],
plugins: [
{ src: '~/plugins/cookie-law', mode: 'client' },
{ src: '~/plugins/vue-agile', mode: 'client' },
{ src: '~/plugins/vue-js-modal', mode: 'client' },
{ src: '~/plugins/vue-formulate', mode: 'client' },
{ src: '~/plugins/vue-the-mask', mode: 'client' },
{ src: '~/plugins/route-to-hash', mode: 'client' },
{ src: '~/plugins/global-components', mode: 'client' },
],
components: true,
publicRuntimeConfig: {
baseSiteTitle: '${DOMAIN}',
siteID: '${WORDPRESS_SITE_ID}',
cmsEndpoint: process.env.IS_LOCAL
? 'https://dashboard${TLD_LOCAL}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}'
: 'https://dashboard${TLD}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}',
newsEndpoint: process.env.IS_LOCAL
? 'https://dashboard${TLD_LOCAL}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}'
: 'https://dashboard${TLD}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}',
},
tailwindcss: {
exposeConfig: true,
},
loading: false,
buildModules: [
'#nuxtjs/tailwindcss',
'#nuxtjs/pwa',
[
'#teamnovu/nuxt-breaky',
{
enabled: true,
enableInProd: false,
colorScheme: 'auto',
position: 'bottomRight',
},
],
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/svg',
'nuxt-fontawesome',
'#nuxtjs/dayjs',
['vue-scrollto/nuxt', { duration: 1000, easing: 'ease-in-out' }],
],
dayjs: {
plugins: ['isSameOrAfter', 'isSameOrBefore'],
},
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: [
'faBullhorn',
'faSortUp',
'faSortDown',
'faUtensils',
'faEnvelopeOpenText',
'faArrowLeft',
'faArrowRight',
'faTimesCircle',
],
},
{
set: '#fortawesome/free-brands-svg-icons',
icons: ['faFacebookSquare', 'faTwitterSquare', 'faInstagram'],
},
],
},
webfontloader: {
typekit: {
id: 'XXXX',
},
},
render: {
bundleRenderer: {
shouldPreload: (file, type) => {
return ['script', 'style', 'font'].includes(type)
},
},
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {},
}
I got it. This is a single page website and I put all the components in the default layout file. In order to generate static markup properly it all needs to be in the index.vue file.
I have tried build Nuxt with Nuxt generate and Nuxt build
those are not build properly
it seem like break
when I use in dev, it was work perfectly
but after I build it and run it, the 3rd party component and css not work at all,
is this because of my nuxt.conf.js wrong ??
I have asked this before but nothing solve yet,
here is my nuxt.config.js
export default {
mode: 'universal',
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 || ''
}
],
script: [
{
src: 'https://kit.fontawesome.com/d0ddd22222fa871ae5.js',
crossorigin: 'anonymous'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Quando&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Palanquin&display=swap'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'#/assets/css/main.css',
'#/assets/css/input.css',
'#/assets/css/animate.css'
],
plugins: [
{ src: '#/plugins/agile.js', mode: 'client' },
{ src: '#/plugins/model-gltf.js', mode: 'client'},
],
router: {
middleware: ['router'],
},
buildModules: [
],
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios'
],
axios: {
baseURL: "http://myapi"
},
build: {
vendor: ['vue-agile', 'vue-3d-model'],
extend(config, ctx) {
}
}
}
can anyone here save my time please
I am trying to configure nuxt.config.js so that vendor and all the other styles would be separated into vendors.css and app.css chunks. This is how my nuxt.config.js looks now:
mode: 'universal',
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' }]
},
loading: { color: '#fff' },
css: [
'#/assets/style/vendors.scss',
'#/assets/style/app.scss'
],
plugins: ['#/plugins/buefy'],
buildModules: [
'#nuxtjs/eslint-module'
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/style-resources'
],
axios: {},
build: {
styleResources: {
scss: './assets/style/utilities.scss'
},
extractCSS: true,
extend(config, ctx) {}
}
}
I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.
//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});
//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});
Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});
var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};
The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}
The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.
Any help/suggestions for the same will be highly appreciated.
Thanks,
Shalini
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*']);
Ext.onReady(function () {
var myData = [{
name: "Rec 0",
type: "0"
}, {
name: "Rec 1",
type: "1"
}, {
name: "Rec 2",
type: "2"
}, {
name: "Rec 3",
type: "3"
}, {
name: "Rec 4",
type: "4"
}, {
name: "Rec 5",
type: "5"
}, {
name: "Rec 6",
type: "6"
}, {
name: "Rec 7",
type: "7"
}, {
name: "Rec 8",
type: "8"
}, {
name: "Rec 9",
type: "9"
}];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: Ext.JSON.encode(myData)
},
delay: 0
}
});
// Column Model shortcut array
var columns = [{
text: "Name",
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: "Type",
width: 70,
sortable: true,
dataIndex: 'type'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
}
}
},
store: firstGridStore,
columns: columns,
stripeRows: true,
title: 'First Grid',
margins: '0 2 0 0'
});
// create the destination Grid
var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
beforedrop: function (node, data) {
data.records[0].set('leaf', false);
data.records[0].set('checked', null);
},
drop: function (node, data, dropRec, dropPosition) {
firstGrid.store.remove(data.records[0]);
}
}
}
});
var displayPanel = Ext.create('Ext.Panel', {
width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo: 'panel',
defaults: {
flex: 1
}, //auto stretch
items: [
firstGrid,
secondTree],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both components',
handler: function () {
firstGridStore.loadData(myData);
secondTreeStore.removeAll();
}
}]
}
});
});
var response = Ext.JSON.encode({
"children": [{
"itemId": 171,
"type": "comedy",
"name": "All the way",
"children": [{
"leaf": true,
"itemId": 171,
"type": "actor",
"name": "Rowan Atkinson"
}],
}, {
"itemId": 11,
"type": "fantasy",
"name": "I love You",
"children": [{
"itemId": 11,
"leaf": true,
"type": "actor",
"name": "Rajan",
}]
}, {
"itemId": 173,
"type": "Action",
"name": "Fast and Furious",
"children": [{
"itemId": 174,
"type": "actor",
"name": "Dwayne Johnson",
"children": [{
"leaf": true,
"itemId": 175,
"type": "wrestler",
"name": "The Rock"
}]
}]
}]
});
Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "name",
type: "string"
}, {
name: "type",
type: "string"
}]
});
Ext.define('Apps.demo.view.TreeGrid', {
extend: 'Ext.tree.Panel',
title: 'Demo',
height: 300,
rootVisible: true,
singleExpand: true,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'Apps.demo.model.Resource',
"root": {
"name": "",
"type": "",
"expanded": "true"
},
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: response
},
delay: 0
}
}),
listeners: {
'beforeiteminsert' : function(obj, node) {
console.log(node);
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Type',
dataIndex: 'type'
}]
});
this.callParent();
}
});
var grid = Ext.create('Apps.demo.view.TreeGrid');
Please check this code .It might not give u the proper answer but will surely give u the hint how to achieve the output.