I have previously made some drag and drop functionality in vanilla JS which I have used in other projects. Now I have started a Vue.js project and I would like to use the same drag and drop functionality.
Is it possible to include a vanilla JS file in a Vue.js component? And how can it be done?
So far I have only tried to add a <script> tag in the head element in the index.html but it throws an error.
<script src="../src/js/drag-and-drop.js"></script>
You can import the script within your vue component with either
import
import '../src/js/drag-and-drop.js';
require
require('../src/js/drag-and-drop.js');
in the script section of your component.
e.g.
<template>
<!-- vue component markup -->
</template>
<script>
import drag from '../src/js/drag-and-drop';
export default {
name: 'you-vue-component',
}
</script>
Related
This is my very beginning with Vue with Symfony. Problem is nothing is displayed in my page, I was expecting Hello to be print. I did all my configurations. I have created folder vue
Inside vue I have following 2 files.
App.vue
<template>
<div id="app">
<h1>Hello</h1>
</div>
</template>
index.js
import Vue from "vue";
import App from "./App";
new Vue({
components: { App },
template: "<App/>"
}).$mount("#app");
I have in my webpack.config.js
.addEntry('app', './assets/vue/index.js')
I did anything wrong here ?
You are mounting the Vue instance to something existing in the DOM with id app. But the component inside App.vue also contains a div with id app. Try to mount to anything else on the page that Symfony creates (you can't mount on body or html). I'm sure that page does not contain anything with id app.
I don't understand the exact purpose of each file.
Suppose I want to add authentication code. Where should I place it, in main.js or App.vue?
I believe you might be missing on some of the basics behind the structure of Vue.js and where and/or how to put in functionality like authentication. It might be worth going through their introduction again to solidify your knowledge.
To answer more directly, when you run a Vue.js application you need to have a basic HTML page (like index.html) as an entry point and the initialisation for your Vue.js application loaded in a <script> in that page.
When you write a Vue.js application you can choose to do it in pure JavaScript, in TypeScript or in the .vue component format which combines the HTML, CSS and JavaScript you need to define components.
The vue format is not run directly. It has to be transpiled into plain JavaScript by the Vue-CLI/builder and packed using a packager like Webpack first and then loaded by your entry point. Luckily, the Vue.js CLI handles nearly all of this process so you can get on with building.
File App.vue
This is typically the root of your application defined in Vue.js Component file format. It's usually something that defines the template for your page:
<template>
<div id="app">
<SideBar />
<router-view v-if="loaded" />
</div>
</template>
<script>
import SideBar from "./pages/SideBar";
export default {
components: { SideBar },
computed: {
loaded() {
return this.$store.state.loadState == "loaded";
}
}
};
</script>
File main.js
This is usually the JavaScript file that will initialise this root component into a element on your page. It is also responsible for setting up plugins and third-party components you may want to use in your app:
import Vue from "vue";
import { store } from "./store/store";
import router from "./router";
import App from "./App.vue";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
File index.html
The index page provides your entry point in HTML providing an element for Vue.js to load into and imports file main.js to initialise your application.
<!-- The HTML element that hosts the App.vue component -->
<div id="app"></div>
<!-- Built files will be auto injected -->
<script type="text/javascript" src="main.js"></script>
On another note, a decent place to put your authentication logic is in the router where you can add navigation guards to restrict access to pages based on the current authentication state and send your users to a login page:
// GOOD
router.beforeEach((to, from, next) => {
if (!isAuthenticated) next('/login')
else next()
})
I don't think you specifically need an index.html in your project. Provided your main.js has an import that references you main Vue page, e.g.:
import App from "./App.vue";
and then renders it.
new Vue({
...
render: (h) => h(App),
...
The .vue file is a special Vue.js CLI project feature allowing you to write Vue.js apps or Vue.js components in more convenient way. You write your app/component in the .vue file and Vue.js CLI transforms it into code that works in a browser.
The main.js in Vue.js CLI project is starting the instance of the app. The index.html file in Vue.js CLI project is handled automatically (it's located in the 'public' folder).
The right place to start with Vue.js CLI is: Instant Prototyping
I am using a component library within my web app and I'd like to attach functionality to one of the provided components.
So let's say I have a .vue file
<template>
<div>
... some stuff
<LibraryComponent />
</div>
</template>
<script>
import LibraryComponent from 'library'
export default {
components: {
LibraryComponent
}
}
</script>
I would love to be able to reach into the LibraryComponent and attach a method to the mounted hook from the parent. I figure I can update the code of the component itself in node_modules but that seems like a bad solution if the package gets updated.
Vue’s lifecycle hooks emit their own custom events.
Take a look at this article:
Vue.js Component Hooks as Events
I am learning Vue.js, I am not using cli for Vue.js installation, I just downloaded Vue.js file and trying to learn it.
My issue is to externalize components like header.vue and footer.vue and add them to main component.
I used Vue.component('MyHeader', require('./components/Header.vue')); to load component but I was getting error like "Uncaught ReferenceError: require is not defined".
To resolve this error I downloaded require.js file from here but I am still unable to load component files.
Folder Structure
index.html
<!DOCTYPE html>
<html>
<head>
<title>this is example of header and footer</title>
</head>
<body>
<div id='root'>
<testcomponent></testcomponent>
<MyHeader></MyHeader>
<div>I am Content</div>
<MyFooter></MyFooter>
</div>
<!-- we need this two files for vue js -->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="require.js"></script>
<!-- End of we need this two files for vue js -->
<script type="text/javascript" src="indexController.js"></script>
</body>
</html>
indexController.js
//rout file for vue js
Vue.component("testcomponent",{
template:'<p>I am Test Component</p>'
});
Vue.component('MyHeader', require('./components/Header.vue'));
Vue.component('MyFooter', require('./components/Footer.vue'));
//import MyHeader from './components/Header.vue'
//import MyFooter from './components/Footer.vue'
var app = new Vue({
el: "#root",
components: {
MyHeader,
MyFooter
},
data: {
},
methods:{
}
});
Header.vue
<template>
<h1>I am Header</h1>
</template>
Footer.vue
<template>
<h1>I am Footer</h1>
</template>
Single file component (.vue)
You need vue-loader to convert .vue files to normal js format.
If you will read the documentation at https://v2.vuejs.org/v2/guide/single-file-components.html, you basically need to use webpack or browserify to use .vue files extensions.
As it says in the comments, you need a build tool to use .vue files. But you can get all the goodness of components, except scoped css, by using plain .js files.
Put your templates in .js template strings, then call your components the old way, with <script src="urlOfFile.js">, or call them with requirejs, but they need to be plain .js files, not .vue.
CommonJS using require (not to be confused with require.js which is using AMD):
Instead of Header.vue create Header.js which you then can require just like you do:
module.exports = {
template: `<template>
<h1>I am Header</h1>
</template>`
}
ES6 export / import
If you want to use ES6 import instead of require, this would be the content of Header.js:
export default {
template: `<template>
<h1>I am Header</h1>
</template>`
}
To work with .vue component files and structuring, you need vue-webpack-loader and a build stack involving something like webpack or browserify.
See
https://v2.vuejs.org/v2/guide/single-file-components.html#For-Users-New-to-Module-Build-Systems-in-JavaScript
If you are just starting with Vue and all the JS magic I would look into the vue cli install approach link. It should install webpack and all the things needed for single page components then you can work backward to deconstruct the pieces of that setup.
You can also look at the examples in the vue GitHub repos. link
That example is using vuex along with single file components but it is solid.
I am totally new to Vue.js and hence I feel the issue is very simple. Here is my Test.vue component:
<template>
<p>Hello Worldd</p>
</template>
<script>
export default {
name : 'test'
}
</script>
I am trying to display this "Hello Worldd" in another component called UserDevices.vue. Here is the contents of that file:
<template>
<div>
<test></test>
<p>test</p>
</div>
</template>
<script>
import Test from './Test'
export default {
name: 'UserDevices',
components: {Test}
}
I am getting an error says:
[Vue warn]: Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <UserDevices> at src/components/UserDevices.vue
<App> at src/App.vue
<Root>
I am using webpack scaffold for vue as template. Isn't this the correct approach to do this?
You are using a .vue file, meaning that vue-loader is looking for a script section enclosed in <script> tags. But, because you are not closing the script tag with </script>, vue-loader will just ignore that section of the .vue file (without any warning).
The template of the Vue component will still get loaded, but the Vue instance's model (with all of its data properties, methods, component, etc.) will not. This is why Vue can't find the <test> component.