I can't use Vue.use to use VueRouter - javascript

I have an issue with vue js , I want to use VueRouter to link 2 vue component, but it seems I have an issue with Vue.use, I have this error :
I don't think the problem is about VueRouter but more about vue import I'm kinda lost at this point
//This is my app.js
import Welcome from "./Jetstream/Welcome";
require('./bootstrap');
window.Vue = require('vue');
console.log(window.vue)
// Import modules...
import { createApp, h } from 'vue';
import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import Router from 'vue-router'
Vue.use(Router)
const router = new VueRouter({
mode: 'history',
routes:
{
path: '/student',
name: 'student',
component: Welcome
},
});
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
<template>
<div>Hello</div>
<!-- this is My vue component-->
<!-- i try use a simple method-->
<a class="btn btn-primary" #click="truc"> Test</a>
<!--And this is what I swa on the documentation-->
<router-link :to="{name: 'student'}">Student</router-link>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Session.vue",
methods:{
truc(){
this.$router.push('/student')
}
}
}
</script>
If you need more content tell me, thanks for your help
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#inertiajs/inertia": "^0.9.1",
"#inertiajs/inertia-vue3": "^0.4.2",
"#inertiajs/progress": "^0.2.5",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"#vue/compiler-sfc": "^3.0.5",
"axios": "^0.21.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.2.4",
"vue": "^3.1.5",
"vue-loader": "^16.1.2"
},
"dependencies": {
"bootstrap": "^5.0.2",
"bootstrap-icons": "^1.5.0",
"bootstrap-vue": "^2.21.2",
"vform": "^2.1.0",
"vue-i18n": "^8.24.5"
}
}
this is my package.json
But I have this in my dependencies :
My app.js is now like that :

I think you use Vue 3, not Vue 2. Because of that you should assign createApp(...) to a variable
let app = createApp(...)
Also you need to do:
import {createRouter} from 'vue-router'
and setup:
const router = createRouter(...)
Then you do
app.use(router)
See how it looks like in docs:
https://next.router.vuejs.org/guide/#javascript

Related

VueFire this.$databaseBind(...).then is not a function

I'm trying to use returned promise from VueFire method $databaseBind (here is the VueFire doc), but unfortunately and I don't know why I have an error this.$databaseBind(...).then() is not a function.
I know that we can have this error when we try call then on non promise value, but $databaseBind should return a promise.
reproduction in codesandbox https://codesandbox.io/s/strange-borg-y41d0u?file=/src/App.vue
Here is my main.js
import { createApp } from "vue";
import App from "./App.vue";
import { VueFire, VueFireDatabaseOptionsAPI } from "vuefire";
createApp(App)
.use(VueFire, {
modules: [VueFireDatabaseOptionsAPI()],
})
.mount("#app");
package.json
{
"name": "happy-new-year",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"firebase": "^9.15.0",
"vue": "^3.2.13",
"vuefire": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
}
firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import "firebase/database";
import "firebase/storage";
import "firebase/auth";
const config = {};
export const fb = initializeApp(config);
export const db = getDatabase(fb);
and usage
<template>
<div>{{ testObject.$value }}</div>
</template>
<script>
import { ref } from "firebase/database";
import { db } from "#/plugins/firebase";
export default {
name: "App",
data() {
return {
testObject: {},
};
},
mounted() {
this.$databaseBind("testObject", ref(db, path)).then();
},
};
</script>
Do somebody have any suggestion? Thanks a lot!
There was an inner bug of VueFire. They have fixed it already.
https://github.com/vuejs/vuefire/issues/1275

React: How to find a dep inside a node module component for a hook?

React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;

How to use material-ui theme along with redux in gatsby

I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...

Electron distribution build displays a blank page

I am working now upon an Electron + React-JS app, and have to create a distribution build. The problem is that after creating that build and launching the resulted file (in our case the compiled app), the app shows me a blank screen without rendering any of ./src folder's content. Everything's working well when launching Electron in dev mode.
For some reference, I'll attach the contents of my package.json, electron's main.js and React's index.js and App.js files.
Package.json
{
...
"build": {
"appId": ...,
"mac": {
"category": ...
},
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#reach/router": "^1.2.1",
"apexcharts": "^3.10.1",
"apisauce": "^1.1.1",
"cross-env": "^6.0.3",
"electron-is-dev": "^1.1.0",
"formik": "^2.0.4",
"moment": "^2.24.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-loading-overlay": "^1.0.1",
"react-notification-system": "^0.2.17",
"react-pin-input": "^0.9.0",
"react-redux": "^7.1.3",
"react-scripts": "3.2.0",
"react-table": "^6.10.3",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"reduxsauce": "^1.1.1",
"seamless-immutable": "^7.1.4",
"yup": "^0.27.0"
},
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-postinstall": "electron-builder install-app-deps",
"electron-start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"build-mw": "yarn react-build && electron-builder -mw"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^5.0.0",
"electron": "^7.1.1",
"electron-builder": "^22.1.0",
"wait-on": "^3.3.0"
}
}
Electron main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 900, height: 680});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', () => mainWindow = null);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
React index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
React App.js
import React from 'react';
import './App.css';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {persistStore} from 'redux-persist';
import {PersistGate} from 'redux-persist/integration/react';
import Navigation from './Navigation';
import {RootReducer} from './Redux/Root.Reducer';
const store = createStore(RootReducer);
const persistor = persistStore(store);
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Navigation />
</PersistGate>
</Provider>
);
}
export default App;
P.S. As opposed to the tutorials found on the internet about linking Electron with React-JS, I've placed Electron's main.js file under ./public directory, in my React project.

Using Grunt with VueJS

I've been trying to setup VueJS2 with Grunt & Browserify only to keep hitting the same error of the template or render function not being defined: [Vue warn]: Failed to mount component: template or render function not defined.
Here's the code:
Index.js:
import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'
Vue.use(Router)
Vue.use(Resource)
// route config
let routes = [
{
path: '/',
name: 'home',
component: indexComponent
},
{ path: '*', redirect: '/' }
]
// Set up a new router
let router = new Router({
routes: routes
})
// Start up our app
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
gruntfile.js:
browserify: {
js: {
files: {
'src/assets/js/app.js': 'src/js/index.js'
},
options: {
debug: true,
bundleDelay: 1000,
transform: [ ["vueify"], ["babelify"] ]
}
}
},
Package.json:
{
"name": "testing",
"version": "0.1.0",
"description": "test",
"main": "src/index.js",
"license": "ISC",
"scripts": {
"test": "grunt test"
},
"browserify": {
"transform": [
"babelify",
"vueify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^6.0.0",
"browserify": "^14.3.0",
"grunt": "^0.4.5",
"grunt-browserify": "^5.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.2.1",
"partialify": "^3.1.5",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.5.3",
"vueify": "^9.4.1"
}
}
Any help would be appreciated.
If you import Vue from 'vue'; you'll get the runtime only build that cannot compile templates, you need the standalone build.
this error arrives when in the system cannot find the template(HTML section of SPA) of .vue file,
in this case it may be App.vue or template.vue.
The file must be in the format of:
`<template>
</template>
<script>
export default{}
</script>
<style>
</style>`

Categories