I see examples of using Vuetify in which only the template is show and there is no importing of Vuetify components like VTool, much less VToolTitle, VToolItems, etc. But if I don't import and declare them I get "Unknown custom element: ..."
I did not load vuetify with "vue add vuetify". Is that necessary? Is there something missing that I can add, if so?
In my main.js I have:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Vuetify)
new Vue({
render: h => h(App),
}).$mount('#app')
This App.vue works:
<template>
<v-app id="vuetify-app">
<v-toolbar>
<v-toolbar-title>
Pro
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>List</v-btn>
<v-btn flat>Profile</v-btn>
<v-btn flat>Help</v-btn>
</v-toolbar-items>
</v-toolbar>
<SignUp msg="Welcome"/>
</v-app>
</template>
<script>
import {VApp, VToolbar, VToolbarTitle, VToolbarItems, VSpacer, VBtn} from 'vuetify/lib'
import SignUp from './components/SignUp.vue'
export default {
name: 'App',
components: {
VApp,
VToolbar,
VToolbarTitle,
VToolbarItems,
VSpacer,
VBtn,
SignUp
}
}
</script>
But if I comment out:
import {VApp, VToolbar, VToolbarTitle, VToolbarItems, VSpacer, VBtn} from 'vuetify/lib'
and all the "VApp, VToolbarTitle, etc" I get the Unknown custom element message.
This line:
import Vuetify from 'vuetify/lib'
is how you import components a la carte.
If you instead want all of the components to be registered globally, import and install Vuetify like this:
import Vue from 'vue'
import Vuetify from 'vuetify' // omit /lib
Vue.use(Vuetify)
Related
My Laravel 9 project uses Vue 2.6 and Vuetify.
As I need to display a Google map, I decided to use vue2-google-maps package. My Google Maps is displaying as blank (though it does take the proper width and height on the page)
This is my app.js file:
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps,{
key:'My_GOOGLE_API_KEY',
libraries: 'places',
})
new Vue({
vuetify,
}).$mount('#app')
The is my blade file
<template>
<div class="map">
<p>Google Map</p>
<gmap-map
:center="{
lat: 47.2736,
lng: 16.0843
}"
:zoom = "7"
style="width:100%; height: 280px;"
>
</gmap-map>
</div>
</template>
Am I doing something wrong? Please advise how to fix the issue or if there is any suggestion to use some-other package.
Thanks.
I'm using Vue with Laravel Mix. In Vue version 2, I was able to do this:
1. resources/js/app.js:
import Vue from 'vue';
import MyComponent from './MyComponent';
Vue.component('my-component', MyComponent);
2. resources/js/MyComponent.vue:
<template>
<p>{{message}}</p>
</template>
<script>
export default {
name: "MyComponent",
props: ['message']
}
</script>
As this Vue 2 document instructed. I know it was not the best practice, but it was the only approach that I have to conveniently pass data from Laravel's Blade template to the component, such as below:
3. anyview.blade.php:
<my-component :message='message' id='app'></my-component>
<script src='public/js/app.js'><script> //include compiled resources/js/app.js
<script>
let app = new Vue({
el: '#app',
data() {
return {
message: 'Hello World';
}
}
})
</script>
In real case, 'Hello World' would be replaced with something like:
message: {{$myMessaGe}}
But since Vue 3, Vue.component is no longer a thing because Vue object is not a default export.
This work flow (1-2-3) has been seamlessly fine, so returning to Vue2 is the last unhappy choice :(
I have tried to work around, just changing Vue.component with the new createApp:
4. resources/js/app.js:
import { createApp } from 'vue';
import MyComponent from './MyComponent';
createApp({
components: {
MyComponent,
}
}).mount('#app');
But instead of adding MyComponent to current instance, it just creates a new one as depicted below - meaning that the prop message can't be passed through.
My question is: Is there any alternative API or workaround to compensate the loss of Vue.component()?
I have only worked with Vue3 so far but what I understand from the documentation is that the components in Vue3 are not that different from components in Vue2.
Try this solution:
import { createApp } from 'vue';
import MyComponent from './MyComponent';
const app = createApp({});
app
.component('MyComponent', MyComponent)
.mount('#app');
You can find more about this in the Vue3 docs.
I have a basic vue 2.6.11 component that lives in a laravel 6 application. It lives at resources/js/components. I create a basic component and then in my app.js file I have vue imported and I define my vue component. Then in my app.blade.php I use the vue component but the text within my <template><div>Text here</div></template> does not appear on the screen. The <h1> text appears but not the vue component text. I looked at other posts but the vue versions other questions on here use are 2-3 years too old and don't apply. Any help is appreciated, thanks.
TableDraggable.vue
<template>
<div>
<h1>Test Text</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('this component has been mounted');
}
}
</script>
What I am using in my app.blade.php file
<h1>This is a test to see if VUE is working</h1>
<table-draggable></table-draggable>
app.js snippet
//Bring in VUE and vue draggable
window.Vue = require('vue');
import VueDraggable from 'vuedraggable';
Vue.component('table-draggable', require('./components/TableDraggable'));
In app.js try the following:
...
window.Vue = require('vue');
import VueDraggable from 'vuedraggable';
Vue.use(VueDraggable);
import TableDraggable from './components/TableDraggable';
Vue.component('table-draggable', TableDraggable);
const app = new Vue({
el: '#app',
data() {
return {};
},
});
...
Then in some parent element of where you are using your component, make sure it has an id of app. eg:
<div id="app">
<h1>This is a test to see if VUE is working</h1>
<table-draggable></table-draggable>
</div>
This is a basic example of getting vue working on your site, and not necessarily the best way to be structuring your assets depending on your needs. The biggest considerations about how to structure these are how bulky your assets will become if you include everything in app.js.
I have some Vue components (.vue) in my Laravel project, resources\assets\js\components. I want to import the components to a view file .blade.php:
<div id='lol'>
<some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
import SomeComponent from '.\resources\assets\js\components\some.vue
new Vue({
el: '#lol'
});
</script>
I got error in console: Uncaught SyntaxError: Unexpected identifier at the import
I don't wanna register the component in app.js
If you don't want to use a compiler, you could use a library such as http-vue-loader, which provides a function to do just that.
Important: The author of the library itself does not recommend to use this library for production environments. Instead, he recommends you to compile your .vue files.
When using the http-vue-loader library, your snippet would look like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<div id='lol'>
<some-component></some-component>
</div>
<script>
new Vue({
components: {
'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
},
el: '#lol',
});
</script>
Alternatively, you can compile and export your vue component as a library, which you then can add to your project.
To export your component as a library, you first need to create an entry point for your component, for example: 'resources\assets\js\components\index.js'. In this entry point, you register your components globally.
import Vue from "vue";
import Some from "./some.vue"
const Components = {Some};
Object.keys(Components).forEach(name=>{
Vue.component(name,Components[name])
})
export default Components;
Next, you need to define a build step for building your library in your package.json, which links to the entry point of your component:
"scripts": {
...
"build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
...
},
Next, call this build step, e.g. by invoking 'yarn build-bundle', or the npm equivalent.
Finally, you can add the compiled component to your webpage. Note, that you don't need to explicitly include your component, since you registered it globally before. Also note that you need to add the type="module" attribute to the script tage, because otherwise you cannot use the import statement. Finally, the outpath of the compiled libraries is the one that is used in your vue.config.js.
<div id='lol'>
<some-component></some-component>
</div>
<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";
const app = new Vue({
el: '#lol',
})
</script>
I'm new to the React-Redux ecosystem, learning by trying out simple applications.
In this case I'm trying out how routing works in the react-redux application.
Basically, the idea is :
Navigate to a new page by clicking a Link( a react-router
component)
Navigate to a new page upon successful completion of dispatched async action.
Here's my code
import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-redux'
class App extends React.Component {
render() {
// And you have access to the selected fields of the State too!
return (
<div>
<header>
Links:
{' '}
<Link to="/">Home</Link>
{' '}
<Link to="/foo">Foo</Link>
{' '}
<Link to="/bar">Bar</Link>
</header>
<div>
<button onClick={() => routerActions.push('/foo')}>Go to /foo</button>
</div>
</div>
)
}
}
export default connect(null, null)(App);
===================================================================
import React from 'react'
import {connect} from 'react-redux'
class Foo extends React.Component {
render() {
return (
<div> <h1>I'm Foo</h1> </div>
)
}
}
export default connect(null, null)(Foo);
===================================================================
import React from 'react'
import {connect} from 'react-redux'
class Bar extends React.Component {
render() {
return (
<div> <h1>I'm bar</h1> </div>
)
}
}
export default connect(null, null)(Bar);
===================================================================
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {Router, Route, browserHistory} from 'react-router'
import {syncHistoryWithStore} from 'react-router-redux'
import configureStore from './store'
import App from './components/test/App';
import Bar from './components/test/Bar';
import Foo from './components/test/Foo';
// Get the store with integrated routing middleware.
const store = configureStore()
// Sync browser history with the store.
const history = syncHistoryWithStore(browserHistory, store)
// And use the prepared history in your Router
ReactDOM.render(
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<Route path="/foo" component={Foo}/>
<Route path="/bar" component={Bar}/>
</Route>
</Router>
</div>
</Provider>,
document.getElementById('root')
===================================================================
import {combineReducers,createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import userReducer from './reducers/reducer-user';
import {routerMiddleware,routerReducer} from 'react-router-redux'
import {browserHistory} from 'react-router'
export default function configureStore() {
// Create the routing middleware applying it history
const browserMiddleware = routerMiddleware(browserHistory);
const logger = createLogger();
const reducer = combineReducers({
userState: userReducer,
routing: routerReducer
})
const store = createStore(reducer,applyMiddleware(thunk,browserMiddleware,logger));
return store;
}
The application builds fine and it comes up well but when i click on the link, it does not work.
See screen shot of the running application
Searched around and read various posts but i could not pinpoint the root problem.
Your code seems to be correct, but there is a simple thing you are missing: you are not rendering the "child" of your router! :)
You can check that out here:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes#sharing-our-navigation
Whenever you want to render a component route (the one you declared using </Route path="application-path" component={MyComponent} />), you need to specify where it will be placed. Using react-router, you specify this using the children prop. Then, whenever React "sees" this prop, it will render your routes (it can be a nested route too).
So, to fix your code, your App component needs to handle this.props.children correctly. Something like that:
class App extends React.Component {
/* ... */
render() {
return (
<div>
<header>Links go here</header>
{this.props.children}
</div>
)
}
}
Now, when you hit "/foo" route, this.props.children will be replaced by Foo component.
By the way, your nested routes (those inside ) don't need to have "/", since they will be "prepended". This is the way react-router render nested routes.
I think that is it, good luck with that! :)