Develop Reference

What is the best way to access Quasar (or Vue 3) app name variable?

How do I implement something like this in Quasar without redefining the variable in each component:
<template>
<div>Welcome to {{ APP_NAME }}.</div>
</template>
My app was setup using Quasar CLI which asked for an app name during setup, so I imagine that is stored somewhere as a global variable or something I can access.
Failing that, maybe Vue 3 has a way of doing this.

Quasar doesn't use a main.js file explicitly. Most of the suggested answers won't work when creating a project using quasar cli. Using quasar.config.js might work but it's still not exactly the right place to do it.
Since you used the quasar cli you need to add a boot file with quasar new boot.
This will generate the file ezglobals.js in your src/boot folder:
quasar new boot ezglobals
Your code in your ezglobals.js file will look something like this after editing:
import { boot } from 'quasar/wrappers'
export default boot(({ app }) => {
app.config.globalProperties.$APP_NAME = 'The name of your app';
})
Finally in quasar.config.js add ezglobals.js to the boot array:
...
boot: [
'ezglobals.js'
]
...

Yo can create global variable in Vue 3:
const globalVariable = 'app name'
app.config.globalProperties.$appName = globalVariable
and then show it in any template like:
<template>
<div>Welcome to {{ $appName }}.</div>
</template>

There are a few ways how you could do it.
The name you specified during project creation using Quasar CLI is stored in your package.json file ("name": "…").
You can access package.json vars like that:
process.env.npm_package_name
Here is a link with more info about it:
https://docs.npmjs.com/cli/v6/using-npm/scripts#packagejson-vars
To make this globally available you can create a boot file specifying a global variable.
Here you can read more on how to create and use boot files (boot is a folder in your project created by quasar cli): https://quasar.dev/quasar-cli/boot-files
Here you can find more info to define global variables: https://v3.vuejs.org/api/application-config.html#globalproperties

You should import Quasar in main.js
import { useQuasar } from 'Quasar'
createApp(App).use(Quasar, { config: {} }).mount('#app')

not exactly global -
you have to make it available in every component you want to use it.
define some env options in your quasar.config.js file:
const packageInfo = require('./package.json')
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
return {
// ....
build: {
// ....
env: {
// https://forum.quasar-framework.org/topic/6853/auto-generate-a-build-number-in-spa/15?_=1653270667151
// https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
// TEST: "42",
appinfo: {
name: packageInfo.name,
version: packageInfo.version,
productName: packageInfo.productName,
description: packageInfo.description,
projectUrl: packageInfo.projectUrl,
previewUrl: packageInfo.previewUrl,
},
},
},
// ....
}
});
than you need to include something like this in YourComponent.vue file:
<template>
<q-page
class="flex column"
style="align-items: center;"
>
<section>
<h4>{{ appinfo.productName }}</h4>
<p>
version: v{{ appinfo.version }}
</p>
<p>
{{ appinfo.description }}<br>
find the project repository at <br>
<a
target="_blank"
:href="appinfo.projectUrl"
>
{{ appinfo.projectUrl }}
</a>
</p>
<p>
a live preview version is hosted at<br>
<a
target="_blank"
:href="appinfo.previewUrl"
>
{{ appinfo.previewUrl }}
</a>
</p>
</section>
</q-page>
</template>
<script setup>
// https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
// console.log(process.env.TEST)
const appinfo = process.env.appinfo
</script>
or for the script part the older way:
<script>
export default {
name: 'AboutPage',
data () {
// https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
// console.log(process.env.TEST)
return {
appinfo: process.env.appinfo,
}
}
}
</script>

'Cannot read property 'set' of undefined' Error For 'this.$cookies.set' [duplicate]

This question already has an answer here:
Can't use plugins in vue
(1 answer)
Closed 1 year ago.
I'm trying to set up some rudimentary cookies for my Vue project and I'm running into the title error when trying to set a cookie. I'm using vue-cookies version ^1.7.4 according to my package.json file. The full error message is as follows when I click my button to make a cookie:
ncaught TypeError: Cannot read property 'set' of undefined
at Proxy.setCookie (VM6493 Register.vue:45)
at Object.onClick._cache.<computed>._cache.<computed> (Register.vue?db27:29)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:333)
setCookie # VM6493 Register.vue:45
Object.onClick._cache.<computed>._cache.<computed> # Register.vue?db27:29
callWithErrorHandling # runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling # runtime-core.esm-bundler.js?5c40:163
invoker # runtime-dom.esm-bundler.js?830f:333
The page with the cookie-setting button is this Register.vue file:
<template>
<layout>
<button v-on:click="setCookie()">Click For Cookie</button>
</layout>
</template>
<script>
import Layout from "./components/Layout";
import axios from "axios";
export default {
name: "Home",
components: {
Layout,
vlink
},
data: () => {
return {
username: "",
}
},
methods: {
setCookie() {
this.$cookies.set("username", "bilbobaggins")
}
}
}
</script>
<style scoped>
</style>
I get this warning when navigating to the Register.vue page:
[Vue warn]: Extraneous non-props attributes (install, config, get, set, remove, isKey, keys) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <Layout install=fn<install> config=fn<config> get=fn<get> ... >
at <Home install=fn<install> config=fn<config> get=fn<get> ... >
at <App install=fn<install> config=fn<config> get=fn<get> ... >
Here's my main.js file:
import {createApp, h} from 'vue'
import App from './App.vue'
import Register from "./Register"
import "./vue-api-call/styles.css"
import VueCookies from 'vue-cookies'
const routes = {'/': App, '/register': Register}
const SimpleRouter = {
data: () => ({
currentRoute: window.location.pathname
}),
computed: {
CurrentComponent() {
return routes[this.currentRoute]
}
},
render() {
return h(this.CurrentComponent)
}
}
createApp(SimpleRouter, VueCookies).mount("#app")
I have tried changing my function in the Register.vue file from 'this' to 'window' or 'VueCookies' after importing it but, that did not work. I also tried different methods to '.use' the VueCookies module in my main.js file but, I'm either not good at that or it's not the problem. Any help would be appreciated. Thank you!
EDIT: Just tried importing Vue-Cookies in the script section of my Register.vue file and changing the function to VueCookies.VueCookies.set("username", "bilbobaggins") but, that gives the same error message.

Apparently the vue-cookie module doesn't work with Vue 3, because the install function uses the Vue 2 version Vue.prototype.$cookie to make it available in all components. Vue.prototype is now Vue.config.globalProperties in Vue 3 (https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties). That's still an open issue in the vue-cookie module GitHub repo: https://github.com/cmp-cc/vue-cookies/issues/59.
If you're using Vue 3, then you need to go to the vue-cookies node module and change this:
install: function (Vue) {
Vue.prototype.$cookie = this;
Vue.cookie = this;
},
to this:
install: function (Vue) {
Vue.prototype ? Vue.prototype.$cookies = this : Vue.config.globalProperties.$cookies = this;
Vue.cookie = this;
},
LittleWhiteLoti provided this fix, all the credit to them: https://github.com/cmp-cc/vue-cookies/issues/59#issuecomment-823796719

Cannot use import statement outside a module using nuxtjs

I am trying to use vue-agile carousel, I can install and get it to run without any issues right after i install it, i am using NUXT, but after restarting my server i keep getting this error and can not find any solution for it
<template>
<div>
<agile>
<div class="slide">
<img src="/img/img2.jpg" alt="" />
</div>
<div class="slide">
<img src="/img/img1.jpg" alt="" />
</div>
</agile>
</div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>

Did you checked the documentation about how to use this plugin in Nuxt instead of a regular Vue?
plugins/vue-agile.js
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)
nuxt.config.js
export default {
plugins: ['~/plugins/vue-agile', mode: 'client']
}
To use component without SSR use the client-only component:
<client-only placeholder="Loading...">
<agile>...</agile>
</client-only>
EDIT: Add Shreerang's suggestion (comment below).

Sergio's answer above is mostly accurate, but needs a small tweek.
The nuxt.config.json config needs the following update. No build config is required.
plugins: [
{ src: '~/plugins/vue-agile', mode: 'client' }
]

You need to mark vue-agile to be transpiled in order to work on the server part (SSR).
nuxt.config.js :
...
build: {
transpile: [/vue-agile/]
}
...

from official Nuxt.js docs, they said.
If you get an Cannot use import statement outside a module error, you
may need to add your package to the build > transpile option in
nuxt.config.js for webpack loader to make your plugin available.
Example
module.exports = {
build: {
transpile: ['vue-agile']
}
}

Add type="module" in your script tag
<script type="module">
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>

Using template's javascript in react js

I am developing an app in react js for that, I am using an HTML/CSS/Javascript based template. I am trying to create navbar. This includes adding few scripts in the code. How to include the scripts in React JS?
This is my code, which is currently giving error:
class TopNavBar extends Component {
state = {
loading: true
}
componentDidMount() {
const scripts = [
'../../assets/global/plugins/jquery.min.js',
'../../assets/global/plugins/bootstrap/js/bootstrap.min.js',
'../../assets/global/plugins/js.cookie.min.js',
'../../assets/global/scripts/app.min.js'
];
for (let i = 0; i < scripts.length; i++) {
const addScript = document.createElement('script');
addScript.setAttribute('src', scripts[i]);
document.body.appendChild(addScript);
}
}
render () {
return (
<div>
<div className="page-header navbar navbar-fixed-top">
<div className="page-header-inner ">
<div className="page-logo">
<img src={logo } style={{width: '40px', height: '40px'}} alt="logo" className="logo-default" />
<div className="menu-toggler sidebar-toggler">
</div>
</div>
</div>
</div>
</div>
)
}}export default TopNavBar
When I run this, I get error:
TopNavBar.js:24 GET http://localhost:3000/assets/global/plugins/jquery.min.js net::ERR_ABORTED
what is the correct way of adding template javascript files in ReactJS app?

npm install jquery --save
npm install --save bootstrap
npm install react-cookie --save
Run the above command on the terminal and then include the below line in your script
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import { withCookies, Cookies } from 'react-cookie';
import './app.min.js';
Go to this link (https://www.npmjs.com/package/package), you can search all the required package and their documentation.

Node.js+React automating tests with Jest

Edit (07/02/2015)
Found out what I was doing wrong. Leaving this for reference if anyone stumbles upon the same issue. Check my answer bellow.
I am currently trying to test my Node.js+React components using Jest. I've installed jest-cli and created a task on my gulpfile to run 'npm test'.
I somehow followed the instructions found here: http://www.undefinednull.com/2015/05/03/react-tdd-example-unit-testing-and-building-a-react-component-with-jest-gulp-and-react-test-utils/
And went to the project git repo to find how to configure some other stuff.
When I run the command 'gulp test' however, apparently all I get is the eslint code validation. I don't think my tests are running at all.
my relevant folder structure is as follows:
/__tests__
searchComponent-spec.js
/src
/components
/Search
Search.js
package.json
gulpfile.babel.js
there are many other stuff but I don't believe they are relevant.
My Search.js
/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
import React, { PropTypes } from 'react';
import styles from './Search.less';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
#withStyles(styles)
class Search {
static contextTypes = {
onSetTitle: PropTypes.func.isRequired
};
render() {
let title = 'Pesquisa de desenvolvedores';
this.context.onSetTitle(title);
return (
<div className="Search">
<div className="Search-container">
<a className="Search-brand" href="/" onClick={Link.handleClick}>
<span className="Search-brandTxt">Dev-Shop</span>
</a>
<div className="Search-banner">
<h1 className="Search-bannerTitle">Loja de desenvolvedores</h1>
</div>
</div>
</div>
);
}
}
export default Search;
My searchComponent-spec.js:
/**
* Created by urielbertoche on 02/07/15.
*/
"use strict";
jest.dontMock('../src/components/Search/Search.js');
describe('Search', function () {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Search;
beforeSearch(function () {
Search = require('../src/components/Search');
});
it('should exists', function () {
// Render into document
var search = TestUtils.renderIntoDocument(<Search />);
expect(TestUtils.isCompositeComponent(search)).toBeTruthy();
});
});
anyone got any idea why my tests may not be running?
Thanks a lot

I found the problem. My package.json had an entry:
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../preprocessor.js",
"unmockedModulePathPatterns": [
"../node_modules/react"
]
},
what I screwed up was that my tests folder was not on the same rootDir declared there, it was on it's parent, moving the tests folder into my src folder fixed it.