Related
I'm new to vuejs and have implemented this example:
Auth0 vuejs and api example
It works just fine, but I run into some issues when trying to merge the vuejs code to my own project.
When loading the page requiring authentication, I get this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure property 'getAccessTokenSilently' of 'Object(...)(...)' as it is undefined.
The code for my page, looks like this:
<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "#/services/message.service";
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
const message = ref("");
const getMessage = async () => {
const { getAccessTokenSilently } = useAuth0();
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
export default {
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none'))
{
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
};
</script>
<template>
<Layout>
<p id="page-description">
<span
>This page retrieves a <strong>protected message</strong> from an
external API.</span
>
<span
><strong
>Only authenticated users can access this page.</strong
></span
>
</p>
<CodeSnippet title="Protected Message" :code="message" />
</Layout>
</template>
I've tried the example from the documentation provided here enter link description here
<script>
import Layout from "../../../layouts/main.vue";
//import { getProtectedResource } from "#/services/message.service";
//import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return {
login: () => {
loginWithRedirect();
}
};
},
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) {
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
}
</script>
But still receives this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure
property 'loginWithRedirect' of 'Object(...)(...)' as it is undefined.
at setup (index.vue?4db4:11:1)
I'm registrering the plugin this way in main:
createApp(App)
.use(store)
.use(router)
.use(VueApexCharts)
.use(BootstrapVue3)
.component(VueFeather.type, VueFeather)
.use(Maska)
.use(Particles)
.use(i18n)
.use(
createAuth0({
domain: 'xyz.auth0.com',
client_id: 'secret',
redirect_uri: 'http://localhost:4040/callback',
audience: 'https://audience',
})
)
.use(vClickOutside).mount('#app');
My package.json file:
{
"name": "vuejs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#auth0/auth0-vue": "^1.0.2",
"#ckeditor/ckeditor5-build-classic": "^32.0.0",
"#ckeditor/ckeditor5-vue": "^2.0.1",
"#fullcalendar/bootstrap": "^5.10.1",
"#fullcalendar/core": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/list": "^5.10.1",
"#fullcalendar/timegrid": "^5.10.1",
"#fullcalendar/vue3": "^5.10.1",
"#j-t-mcc/vue3-chartjs": "^1.2.0",
"#popperjs/core": "^2.11.2",
"#simonwep/pickr": "^1.8.2",
"#vue-leaflet/vue-leaflet": "^0.6.1",
"#vueform/multiselect": "^2.3.1",
"#vueform/slider": "^2.0.8",
"#vueform/toggle": "^2.0.1",
"#vuelidate/core": "^2.0.0-alpha.34",
"#vuelidate/validators": "^2.0.0-alpha.26",
"#zhuowenli/vue-feather-icons": "^5.0.2",
"aos": "^2.3.4",
"apexcharts": "^3.33.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"bootstrap-vue-3": "^0.3.3",
"chart.js": "^3.7.0",
"click-outside-vue3": "^4.0.1",
"core-js": "^3.6.5",
"echarts": "^5.3.0",
"feather-icons": "^4.28.0",
"firebase": "^9.6.6",
"highlight.js": "^11.4.0",
"leaflet": "^1.7.1",
"lottie-web": "^5.8.1",
"maska": "^1.5.0",
"moment": "^2.29.1",
"node-sass": "6.0.1",
"particles.vue3": "^1.40.2",
"prismjs": "^1.26.0",
"sass-loader": "^10.2.1",
"simplebar": "^5.3.6",
"simplebar-vue3": "^0.1.5",
"sweetalert2": "^11.4.32",
"swiper": "^6.8.4",
"vue": "3.2.36",
"vue-router": "^4.0.15",
"vue-draggable-next": "^2.1.1",
"vue-easy-lightbox": "^1.3.0",
"vue-feather": "^2.0.0",
"vue-flatpickr-component": "^9.0.5",
"vue-i18n": "^9.2.0-beta.15",
"vue-prismjs": "^1.2.0",
"vue3-apexcharts": "^1.4.1",
"vue3-count-to": "^1.1.2",
"vue3-echarts": "^1.0.4",
"vue3-google-map": "^0.8.3",
"vue3-quill": "^0.2.6",
"vuevectormap": "^1.0.8",
"vuex": "^4.0.2",
"yarn": "^1.22.17"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Using #auth0/auth0-vue has a limitation. useAuth0 must be used in the setup hook. Read the documentation for info.
To add login to your application, use the loginWithRedirect function that is exposed on the return value of useAuth0, which you can access in your component's setup function.
<script>
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const message = ref("");
const { getAccessTokenSilently } = useAuth0();
const getMessage = async () => {
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
return {
message
}
},
...
}
</script>
<template>...</template>
I have one project with webpack and i want to add vue to this.
Vue work (function via mounted() show console.log), but i can't render template from sfc component.
Not errors in console.
This trouble component Departments.vue:
<template lang="pug">
.cont
.department 111
</template>
<script>
export default {
name: 'departments',
data() {
return {
deps: '',
}
},
props: {
list: {
type: String,
default: ''
}
},
beforeMount() {
console.log('before');
},
mounted() {
console.log('mount');
}
}
</script>
html(just on the one single page):
<div id="app">
<hr/>
lala <br/>
<departments list='vue list'></departments>
<hr/>
<test></test>
</div>
in app.js:
import { createApp } from 'vue'
import departments from './components/Departments.vue';
const app = createApp({
data() {
return {
count: 134
}
},
// components: {
// departments,
// },
})
app.component('departments', departments)
app.component('test', {
template : '<div><h1>This is coming from component</h1></div>'
})
app.mount('#app')
For testing i added test component inline into app.js - and it's worked!
Here result:
my broken component showing '< ! ---- >' symbols...
package.json
{
"name": "---",
"version": "1.0.0",
"description": "just show me vue templates",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#vue/compiler-sfc": "^3.2.37",
"autoprefixer": "^10.4.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"browser-sync": "^2.27.10",
"browser-sync-webpack-plugin": "^2.3.0",
"chartist-plugin-pointlabels": "^0.0.6",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"cssnano": "^5.1.12",
"html-webpack-plugin": "^5.5.0",
"jquery": "^3.6.0",
"jquery-mask-plugin": "^1.14.16",
"jquery.cookie": "^1.4.1",
"jquery.photoswipe": "^1.1.1",
"magnific-popup": "^1.1.0",
"mini-css-extract-plugin": "^2.6.1",
"node-loader": "^2.0.0",
"node-sass": "^7.0.1",
"nouislider": "^15.6.0",
"photoswipe": "^5.2.8",
"postcss-loader": "^7.0.1",
"pug": "^2.0.4",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.1.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"swiper": "^8.3.1",
"url-loader": "^4.1.1",
"vue-loader": "^17.0.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.7",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"#babel/core": "^7.18.6",
"afterglowplayer": "^1.1.0",
"bigpicture": "^2.6.2",
"chartist": "^0.11.4",
"clean-webpack-plugin": "^4.0.0",
"file-loader": "^6.2.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"lity": "^2.4.1",
"vue": "^3.2.37",
"vue-click-outside": "^1.1.0"
}
}
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: { main: './src/js/app.js' },
output: {
path: path.resolve(),
filename: '../js/bundle.js'
},
target: 'node',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
},
},
'postcss-loader',
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /\.(png|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/plugins'
}
}]
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: { baseDir: [path] }
}),
new CopyWebpackPlugin({
patterns:[
{from: 'src/img/', to: '../images/',},
{from: 'src/fonts/', to: '../fonts/',}
]
}),
new ImageminPlugin({
pngquant: {
quality: '100'
},
}),
new MiniCssExtractPlugin({
filename: '../template_styles.css',
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new VueLoaderPlugin(),
],
};
can you help me with this error?
The image successfully rendered when started the local env but when I run the test the src is always empty.
Already tried it with :src="require('...')" but it didn't help.
What config or other thing I miss?
Here are my related configs, files and versions:
//package.json
{
...
"scripts": {
"test": "jest"
},
"dependencies": {
"core-js": "^3.21.1",
"vue": "^3.2.31"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#vue/cli-plugin-babel": "~5.0.1",
"#vue/cli-service": "~5.0.1",
"#types/jest": "^27.4.1",
"#vue/test-utils": "^2.0.0-rc.18",
"#vue/vue3-jest": "^27.0.0-alpha.4",
"eslint-plugin-jest": "^26.1.1",
"jest": "^27.5.1",
"jest-transform-stub": "^2.0.0",
"webpack": "^5.69.1"
}
...
}
//jest.config.js
{
...
moduleNameMapper: {
"^#/(.*)$": "<rootDir>/src/"
},
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "#vue/vue3-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
},
}
//Image.Vue
<template>
<img src="#/assets/foo.jpg" alt="">
</template>
...
//image.test.js
...
import MyImg from '../src/components/MyImg.vue'
test('img src attribute is', () => {
const wrapper = shallowMount(MyImg)
expect(wrapper.find("img").attributes("src")).toBe("/img/foo.jpg")
})
I have figured it out:
The problem is with jest-transform-stub as it just adds an empty string to the src attribute.
The solution comes from https://jestjs.io/docs:
Create a fileTransformer.js file with the following code:
//fileTransformer.js
const path = require('path');
module.exports = {
process(src, filename, _config, _options) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
},
};
and modify Jest config with it:
//jest.config.js
...
transform: {
//other configs you have
".+\\.(css|styl|less|sass|scss|svg|png|jpg|jpeg|ttf|woff|woff2)$": "<rootDir>/path_to_file/fileTransformer.js",
},
...
and after this the expected .toBe value will be: foo.jpg
I have a Rails application with Vue and when I installed Jest and tried to run my Menu_Filter.test.js test, I got this error. I tried many solutions, but nothing worked.
Error:
My package.json in which I configured Jest:
{
"name": "immomapper-frontend",
"version": "0.1.0",
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.3",
"#vue/composition-api": "^1.2.4",
"#vueform/multiselect": "^2.2.0",
"#vueform/slider": "^2.0.5",
"babel": "^6.23.0",
"babel-jest": "^27.2.5",
"jest": "^27.2.5",
"leaflet": "^1.7.1",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"vue2-leaflet": "^2.7.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#vue/babel-preset-app": "^4.5.14",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0",
"vue-jest": "^3.0.7",
"webpack-dev-server": "^3"
},
"scripts": {
"test": "jest"
},
"jest": {
"roots": [
"app/javascript/spec"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$'": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"testEnvironment": "jsdom"
}
}
My test file:
import { mount, shallowMount } from '#vue/test-utils'
import Filter from '../components/Menu_filter'
test('Filter exists', () => {
const wrapper = mount(Filter);
expect(wrapper.is(Filter)).toBe(true)
})
Lastly, my babel.config.js:
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: auto,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'#babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
I don't use Typescript, I did add the yarn add babel-core#bridge --dev, I used transform, I also tried to change the jest version to 26.x.x, I added type="module" to my vue component... I don't know what the problem is.
thanks for reading this. I am building a web app using vuejs and flask as server. Do you guys have any recommendation for why it does not recognize "import"? im trying to use this.$http.get . why it is not recognizing it? thanks in advance
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.component( 'button-labels', {
props : ['labelbtn'],
template : `<div class="button-container"><button class="button-app" v-for="label in labelbtn" v-on:click="clickHandler(label)" >{{label.label}}</button></div>`,
methods : {
clickHandler : function(label) {
if (label.id === 1)
{
this.$emit('event_child', 'search-template')
}
},
}
})
Vue.component( 'search-template', {
props: ['searchdata'],
data : {
entries : []
},
template : `<div><input class="searchBar"><div class="response-list"><button class="entries"></button></div>
<audio class="audio" controls></audio><button class="button-back" v-on:click="backHandler"> Return</button></div>` ,
methods : {
backHandler : function(){
this.$emit('event_child', 'button-labels');
},
},
created : function(){
this.$http.get('https://google.com', (data) => {
console.log( data );
})
.error((err) => console.log(err))
},
})
new Vue({
el: '#app',
data : {
labels : [
{ id : 1, label : "Search" } , { id : 2, label: "Categories" }, { id : 3, label: "Favorites" }, {id : 4, label: "Settings"}
],
currentView : "button-labels",
},
methods : {
eventChild : function(label)
{
this.currentView = label;
}
}
})
this is my package.json
{
"scripts": {
"transpile-es2015": "babel src -d lib"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-runtime": "^6.0.14",
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"vue-hot-reload-api": "^1.2.1",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.0.1",
"webpack": "^1.12.3",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"bootstrap": "^3.3.5",
"vue-resource": "^0.1.17",
"vue-router": "^0.7.5",
"vue": "^1.0.7"
}
}