Vuejs

TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?

I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:

<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>

And, normally you would just use a link tag to get the styles in there:

<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">

..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.

This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.

I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.

So far, I have been loving how low-configuration the build with vue-cli has been:

vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT

...but its output is always the two files:

./dist/vue-COMPONENT_NAME.js ./dist/vue-COMPONENT_NAME.css

Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?

I am currently thinking about coding my first webapp. I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.

The problem is that i do not really know how to achieve my goal.

My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.

Now what want to know is:

1. Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
2. I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
3. How can I create these cards which are automatically getting added to the homepage ?
4. How can I save the data for each individual card? (especially without a login procedure...)?

I know these are quite easy questions but I really want to learn how to do it.

Please check the images below.

(check:

In bootstrap.js, I have this:

window.Vue = require('vue'); window.events = new Vue();

Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:

const app = new Vue({ router }).$mount('#app')

Thank you!

I trying to get an object from Firebase database using axios, and when I getting data from it,I want to assign to my users array in vue data object. when i console.log this.users ,it has value, but when I trying print in DoM , its shows empty array.I try vm.$forceUpdate() ,so thinking maybe,it's just DoM,not getting updated.But it doesn't work.Thanks in advance for help.

var SeptCoh = [ { name: 'Example Name', description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact', photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg', learningjournal: 'http://yourplunkhere.smth', }, ]; var app = new Vue({ el: '#app', data: { user:{ name:'', description:'', photourl:'', learningjournal:'' }, users:[], cohort:SeptCoh, }, methods:{ //Posting data to Firebase submit(){ axios.post('https://september-cohort.firebaseio.com/users.json', this.user) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); }, //fetching data from Firebase fetchData(){ axios.get('https://september-cohort.firebaseio.com/users.json').then(function (response) { // console.log(response.data); // this.users = response.data; // console.log(this.users); const resultArray = []; for(let key in response.data){ resultArray.push(response.data[key]); } this.users = resultArray; console.log(this.users); }) .catch(function (error) { console.log(error); }); }, }, //Triggering fetching method. created(){ this.fetchData(); }, //watching for changes in users array watch:{ users:function(){ var vm = this; setTimeout(vm.$forceUpdate(),1000); } } }); <!DOCTYPE html> <html> <head> <title>SEPCO: Elium September Cohort Page</title> <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> </head> <body> <div class="pimg"> <div class="ui two column centered grid"> <h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1> </div> </div> <div class='ui container'> <br> <br> <br> <h2 class="ui center aligned header">Welcome</h2> <p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p> <i>Our clan name on codewars.com: SEPCO</i> <div id='countdown'> <!-- who wants to code up a count-down to the startdate of the bootcamp?? --> </div> <hr> <h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2> <hr> <ol class="ui list"> <li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li> <li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1) <ol> <li>Suggestion Flo: paste link here?</li> </ol> </li> <li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li> <li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this: <ol> <li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li> <li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li> </ol> </li> <li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li> </ol> <h2 class="ui grey center aligned header">Shared Milestones</h2> We want to get the following done by September 10th. <ul> <li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li> <li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li> <li>REVISIT first week of August: Basic HTML</li> <li>REVISIT first week of August: Basic CSS</li> <li>REVISIT first week of August: GIT</li> </ul> <br> [this section needs more love] <h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2> The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode) <br> <br> <!-- loop and create Info card Using Vue.js --> <div id="app"> <!--Starting vue instance here--> <div class="ui link cards"> <div v-for="people in cohort"> <div class="ui card"> <div class="image"> <img :src="people.photourl"> </div> <div class="content"> <div class="header">{{people.name}}</div> <div class="description"> <p>{{people.description}}</p> </div> <br> <div class="extra content"> <span class="left floated"> <i class="arrow down icon"></i> <a :href="people.learningjournal">Plunker</a> </span> </div> </div> </div> </div> </div> <br> {{users}} <br><br><br> <!-- Form for making users cards --> <form class="ui form"> <div class="field"> <label>First/Last-Name:</label> <input type="text" v-model="user.name" placeholder="First/Last Name"> </div> <div class="field"> <label>Description of You:</label> <textarea v-model="user.description"></textarea> </div> <div class="field"> <label>Picture Url:</label> <input type="text" v-model="user.photourl" placeholder="Picture Url"> </div> <div class="field"> <label>Plunker Url:</label> <input type="text" v-model="user.learningjournal" placeholder="Plunker Url"> </div> <button class="ui button" @click.prevent="submit">Submit</button> </form </div> <!--end of vue instance--> <div id="footer"><hr></div> <!-- Your web-app is https, so your scripts need to be too --> <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script src="client.js"></script> </div> </body> </html>

I'm setting the selected option of a v-select using v-model, so when I open the screen it already comes with the result. That's working fine until I set autocomplete property in v-select tag. When I do that the option is chosen but the select doesn't show it. Is there any issue with the autocomplete feature or it's the standard behavior for the component?

Vue.use(Vuetify); var app = new Vue({ el: '#app', data() { return { selected: 2, country: [{ text: 'USA', value: 1 }, { text: 'Canada', value: 2 }, { text: 'England', value: 3 }, { text: 'France', value: 4 }] } } }) <script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <div id="app"> <v-app> <v-card class="grey lighten-4 elevation-0"> <v-card-text> <v-container fluid> <v-layout row wrap> <v-flex xs4> <v-flex> <v-subheader>Origin Country</v-subheader> </v-flex> <v-flex> <v-select :items="country" v-model="selected" label="Select" class="input-group--focused" single-line bottom autocomplete> </v-select> </v-flex> </v-flex> <v-flex> Selected: {{ selected }} </v-flex> </v-layout> </v-container> </v-card-text> </v-card> </v-app> </div>

Here it is jsfiddle link: https://jsfiddle.net/vcmiranda/huj9L4bq/ Thanks.

I have a Vue component named searchbox and I want the users to get redirected to display the results once they type the name and click the search button. I am using axios to make the http request. Here's my template:

<form @submit.prevent="searchResult"> <div class="field has-addons searchbox"> <div class="control"> <input class="input" type="text" id="search" name="q" placeholder="Search a video..." @keyup.enter="searchResult" v-model="searchData"> </div> <div class="control"> <button class="button is-primary"><i class="fa fa-search"></i></button> </div> </div> </form>

Here's my script in the Vue file:

<script> export default { data() { return { searchData: null, }; }, methods: { searchResult() { axios.get('/search?q=' + this.searchData); } } } </script>

Here's my search controller:

class SearchController extends Controller { public function index(Request $request) { return view('search.index'); } }

However, I can not see the redirection. How do I redirect from vue component to another route in laravel??

Is vue-router necessary or we can follow any other method??

I tried to implement this:

https://vuejs.org/v2/examples/select2.html

I am not making SPA, although I am using Vue components in my page.

[Vue warn]: Error in mounted hook: "TypeError: $(...).select2 is not a function"

found in

I get this error

Error in mounted hook: "TypeError: $(...).select2 is not a function" found in <Select2> at C:\laragon\www\lara\resources\assets\js\components\ui\Select2.vue

I include both select2 and my vuejs in the html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script src="{{ asset('js/content_type_blocks.js') }}?{{ str_random(7) }}"></script>

I wonder why do I get the error that select2 is not a function?

According to the VueRouter documentation, it is possible to add meta fields and globally restrict routes based on their values.

After attempting an implementation as outlined, I get an error: ReferenceError: record is not defined (line 46)

Which corresponds to this line:

if (!hasCookies(record.meta.cookies)) {

Here is the file that has the router-guard logic:

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path : '/authenticate/:id', component : require ('./components/authenticate.vue'), redirect: '/here', }, // can only get here if the passcode has been filled out { path : '/client/create', component : require('./components/createClientForm.vue'), meta : { cookies: ['passcode_cookie'], // need passcode to be able to create the client redirect: '/authenticate/1' // dummy value here for now } }, // can only get here if passcode and client form have been completed { path : '/test/:id', component : require('./components/runTest.vue'), meta : { cookies : ['passcode_cookie', 'client_cookie'], redirect : '/client/create' } } ]; const router = new VueRouter ({ routes, mode: 'history', }); function hasCookies (cookies) { return cookies.every(cookie => document.cookie.indexOf(cookie) !== -1); } router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.cookies)) { // this route requires cookies, check if cookies exist if (!hasCookies(record.meta.cookies)) { next({ path : record.meta.redirect || '/', }) } else { next(); } } else { next(); // make sure to always call next()! } }); const app = new Vue ({ router }).$mount('#app');

Any idea on what I may be doing wrong?

I'm making my simple social network with Node.JS, Hapi and Vue. I want to have Facebook login. As Fcebook Auth can't be done in SPA I came up with the following method.

1. Add login button to SPA. This is link to server route which will redirect request to Facebook
2. User will log in with facebook
3. Server will return simple HTML page which will include JWT, and store JWT in browser's session store
4. that simple page will than redirect browser to SPA

Is there better way to do it? Should I somehow place JWT in SPA index.html page??

I'm using a Vue JS method to test if data exists in firebase and if so evaluate the v-if to true I have a method that works, but then it keep looping. I just learned that altering the state can cause the v-for to re-render and thus the infinite loop, but I'm having trouble applying this knowledge to my method. Here is my issue:

HTML:

<li v-for="..."> <button v-if="isAttending(report)" @click="qualify(report)"> View </button

And the Method:

isAttending (report) { var theUser = this.user.user.displayName console.log(theUser) reportsRef.child(report['.key']).child('participants').once('value', function (snapshot) { if (snapshot.hasChild(theUser)) { console.log('exists') } }) }

How can I make this so it doesn't alter state preventing the loop?

I'm not sure if this is possible, but I'm trying to get a method to return truthy falsely for a v-if statement. But right now the button always is true for some reason.

Here's my HTML(Pug):

button(v-if="!isAttending(report)" @click="qualify(report)") RSVP

And my JS (Vue)

methods: { isAttending (report) { var that = this var theReport = report if (that.$firebaseRefs.attending.child(that.user.user.displayName).child(theReport['.key']).child('going') === true) { return true } else { return false } }

Essentially what I am doing it asking firebase is something exists and returning true or false. I'm not convinced this is the best way but have yet to come up with better.

There is an online exam, this exam has 5 pages, there is a count down timer (120 seconds) and 4 questions in each page. After 120 seconds user is automatically transferred to the next page, or he can click on next button before that.

What I want is preventing user from seeing other pages. All pages has to be visible for maximum 120 seconds. User should not be able to click on back button and see previous pages. Is this possible at all ?

I want to create this app with Vuejs and vue-router but I don't know how to implement this with vue-router, I have done some research but got not much result!

Or maybe I should not use vue-router, and use my own simple router, for example :

$("#page1").show(); $("#page2").hide(); $("#page3").hide(); . . // after 120 secs $("#page1").hide(); $("#page2").show(); $("#page3").hide(); . . // this is not secure at all !

I am using Laravel5.4 and VueJs, There is an Ajax request for every question that user answers. Any thoughts are appreciated. Thank you.

I'm creating a gallery with the #listGroup bootstrap component. I want when one of the albums in the click change the active #listGroup even the page is reload or refresh. How do I fix this?

HTML/PHP

<div class="container"> <div class="row"> <h2 class="col-xs-12">Gallery</h2> </div><!-- /row --> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="list-group" id='listGroup'> <?php include 'dismin/pages/koneksi.php'; if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; $start_from = ($page-1) * 12; $sql = "SELECT * FROM tbl_album where status='process' ORDER BY albumid DESC LIMIT $start_from, 12"; $rs_result = mysql_query ($sql); ####### Fetch Results From Table ######## $no=0; while ($row = mysql_fetch_assoc($rs_result)) { $aid=$row['albumid']; $aname=$row['name']; ?> <a href="gallery?id=<?php echo $aid; ?>" class="list-group-item" v-bind:class="{ 'active' : isSelected(<?php echo $no; ?>) }" v-on:click="selected = <?php echo $no++; ?>"><?php echo $aname; ?></a> <?php } ?> </div> </div><!-- /col --> <div class="col-xs-12 col-sm-9"> <div class="row"> <?php include "dismin/pages/koneksi.php"; $aid = $_GET['id']; $sql = "SELECT * FROM tbl_gallery where aid=$aid and status='process'"; $num_rows = mysql_num_rows(mysql_query($sql)); ####### Fetch Results From Table ######## $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { $gimage=$row['gimages']; ?> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="dismin/pages/galeri/aksi/gupload/<?php echo $gimage; ?>"> </a> </div><!-- /col --> <?php } ?> </div><!-- /row --> </div><!-- /col --> </div><!-- /row --> </div><!-- /container -->

JAVASCRIPT

new Vue({ el: '#listGroup', data: { selected: 0 }, methods: { isSelected: function (i) { return i === this.selected } } })

I have the following ajax response from the API:

{ "data": [ { "id": 16, "sender_id": 1, "text": "Test", "created_at": "2017-07-21 15:42:08", "updated_at": "2017-07-21 15:42:08", "sender": { "data": { "id": 1, "name": "John Doe", "email": "john@doe.co", "mobile": "+1875446799976", "photo_url": "https://example.co/storage/profiles/0H6Rkwsrlns0R1PY03Mta2qIhdPhV7N19jaagH3m.jpeg", "first_login": 0, "uses_two_factor_auth": false, "two_factor_reset_code": null, "current_team_id": 1, "stripe_id": null, "current_billing_plan": null, "billing_state": null, "vat_id": null, "trial_ends_at": "2017-06-27 10:06:05", "last_read_announcements_at": "2017-06-27 10:06:05", "created_at": "2017-06-27 10:06:05", "updated_at": "2017-06-28 10:40:07", "tax_rate": 0 } }, "buildings": { "data": [ { "id": 4, "team_id": 1, "name": "Oasis", "created_at": "2017-06-30 13:15:30", "updated_at": "2017-06-30 13:15:30", "pivot": { "sending_id": 16, "building_id": 4 } } ] }, "messages": { "data": [ { "id": 316, "sending_id": 16, "recipient_id": 42, "provider_id": "0B0000006A1ABFEF", "info": null, "status": "delivered", "price": "0.07500000", "error_text": null, "created_at": "2017-07-21 15:42:08", "updated_at": "2017-07-21 15:42:21", "recipient": { "id": 42, "name": "John Doe", "email": "john@doe.co", "mobile": "198765456789", "types": [ "Inhabitant" ], "building_id": 4, "created_at": "2017-07-01 07:21:52", "updated_at": "2017-07-01 07:21:52", "deleted_at": null } } ] } }, ... }

But when I try to display recipient name like the following:

<tr v-for="sending in sendings"> <td>{{ sending.created_at | moment }}</td> <td><div style="width: 300px">{{ sending.text }}</div></td> <td> <div v-for="building in sending.buildings.data" v-if="sending.buildings.data"> {{ building.name }} </div> </td> <td> <ul> <li v-for="message in sending.messages.data" v-if="sending.messages.data"> {{ message.recipient.name }} </li> </ul> </td> </tr>

I get this error in console and no row is display at all: TypeError: Cannot read property 'name' of undefined

It's odd because displaying Building name works just fine, the only difference is recipient is one level deeper..

Any thoughts?

Trying to access the value of the key with Vue.js which is new for me. I want to use the key as the id and access the title with key.title or something similar if possible. Here is the code I am trying:

HTML

<ul id="all"> <li v-for="(song,key) in songs" :class="{ active: song.isActive }" v-bind:id="key"> {{ key.title }} //Hound Dog </li> </ul>

Javascript

var vm = new Vue({ el: '#all', data: { songs: [ a:{ title:'Hound Dog', lyrics:'You aint nothing but a hound dog, crying all the time', isActive: true }, b:{ title:'Long Gone', lyrics:'I am long gone today', isActive: false } ] } })

This question already has an answer here:

• JavaScript closure inside loops – simple practical example 31 answers

I'm running an axios ajax call within a for object loop that is also within another axios ajax call. The parent object seems to be available within the the internal axios function, but specifying the object within the loop with [i] returns undefined. Here is my current code:

// GET NEXT PAGE OF POSTS axios.get(`https://rootdomain.co.uk/cms/index.php/wp-json/wp/v2/posts?offset=1&per_page=4&page` + this.currentPage) .then(function (response) { var additionalPosts = response.data // var additionalPostsThumbnails // SET FEATURED IMAGE AND THUMBNAIL KEY AND VALUE for (var i = 0; i < additionalPosts.length; i++) { const featuredImageAPI = 'https://rootdomain.co.uk/cms/index.php/wp-json/wp/v2/media/' + additionalPosts[i].featured_media axios.get(featuredImageAPI).then(response => { console.log(additionalPosts) console.log(additionalPosts[i]) }) } // REMOVE 'is-loading' CLASS TO BUTTON button.classList.remove('is-loading') })

So console.log(additionalPosts) is working, but console.log(additionalPosts[i]) is returning undefined. Any ways around this?

Once I can access the specific object the aim is to add another key and value to the individual objects.

Appreciate any help. Thanks!

I am trying to populate canvajs graph using random array value. I am using Veujs2 library to implement the template to display the graph data. Please find the below file which i have pasted with the code.

import {Line} from 'vue-chartjs' export default Line.extend({ created () { this.generateRandomArray() }, methods: { generateRandomArray: () => { var dataForX = Array.from({ length: 7 }, () => Math.floor(Math.random() * 40)) } }, mounted () { this.renderChart({ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'Server One', backgroundColor: '#FC2525', // data: [40, 39, 10, 40, 39, 80, 40] data: this.dataForX }, { label: 'Server Two', backgroundColor: '#05CBE1', data: [60, 55, 32, 10, 2, 12, 53] } ] }, {responsive: true, maintainAspectRatio: false}) }

})

In generateRandomArray() i have the dataForX variable value, i am not able to use this variable inside the renderchart function.

My view like this :

@foreach($leagues as $league) <a @click="$refs.leagues.changeLeague({{ $league->id }})"> {{ $league->name }} </a> @endforeach ... <top-league class="slick" league-id="{{ $league_id }}" ref="leagues"></top-league>

My top league component vue like this :

<template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"> <a :href="baseUrl+'/leagues/'+item.id+'/'+item.name" :style="{backgroundImage: 'url(' + baseUrl + '/img/leagues/'+item.photo+ ')'}"> </a> </div> </div> </div> </div> </template> <script> ... export default { ... props: ['leagueId'], created() { $('.slick').slick({slidesToShow: 3, infinite: false}); this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first }, computed: { ...mapGetters([ 'getListLeague' ]), items() { const n = ['getListLeague'] return this[n[0]] // this is response ajax // exist 5 league } }, methods: { ...mapActions([ 'getTopLeague' ]), changeLeague(leagueId) { this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked } } } </script>

When loaded the first time, there are 5 items of data displayed in the form of sliders. I tried putting this code : $('.slick').slick({slidesToShow: 3, infinite: false}); in created, but there was an error

If the code executed, there exist error like this :

[Vue warn]: Error in created hook: "TypeError: $(...).slick is not a function"

How can I solve it?

I'm trying to import an external jQuery plugin in a Vuejs component. The plugin is nested.js How can I do? Thanks

we are in a big project building a muti-user system imagine something like Wordpress or Blogger where every user has their own site on a subdomain e.g. john.ourcompany.com.

We used Vue.js without much trouble to build the admin. But for the frontend we would like to have server-side rendering (because of SEO reasons of course).

The trouble is our template looks like this (see below) and the idea is the user can choose what header/body/footer their site uses.

So the app makes an API Call to ask for the config of the site. When the config is returned the app now knows which component to use for header, footer and body. At this point it load only one header, one body, one footer.

Problem is Nuxt.js says it does server-side render things but it does not. It only renders the content of the page and none of the component content.

<template> <div> <!-- headers --> <header-alpha v-if="doneLoading && shopTheme.header == 'Header-alpha'"></header-alpha> <header-beta v-if="doneLoading && shopTheme.header == 'Header-beta'"></header-beta> <header-delta v-if="doneLoading && shopTheme.header == 'Header-delta'"></header-delta> <header-epsilon v-if="doneLoading && shopTheme.header == 'Header-epsilon'"></header-epsilon> <header-eta v-if="doneLoading && shopTheme.header == 'Header-eta'"></header-eta> <header-gamma v-if="doneLoading && shopTheme.header == 'Header-gamma'"></header-gamma> <header-zeta v-if="doneLoading && shopTheme.header == 'Header-zeta'"></header-zeta> <!-- home bodies --> <home-alpha v-if="doneLoading && shopTheme.homepageBody == 'Home-alpha'"></home-alpha> <home-beta v-if="doneLoading && shopTheme.homepageBody == 'Home-beta'"></home-beta> <home-delta v-if="doneLoading && shopTheme.homepageBody == 'Home-delta'"></home-delta> <home-epsilon v-if="doneLoading && shopTheme.homepageBody == 'Home-epsilon'"></home-epsilon> <home-eta v-if="doneLoading && shopTheme.homepageBody == 'Home-eta'"></home-eta> <home-gamma v-if="doneLoading && shopTheme.homepageBody == 'Home-gamma'"></home-gamma> <home-theta v-if="doneLoading && shopTheme.homepageBody == 'Home-theta'"></home-theta> <home-zeta v-if="doneLoading && shopTheme.homepageBody == 'Home-zeta'"></home-zeta> <!-- home footers --> <footer-alpha v-if="doneLoading && shopTheme.footer == 'Footer-alpha'"></footer-alpha> <footer-beta v-if="doneLoading && shopTheme.footer == 'Footer-beta'"></footer-beta> <footer-delta v-if="doneLoading && shopTheme.footer == 'Footer-delta'"></footer-delta> <footer-gamma v-if="doneLoading && shopTheme.footer == 'Footer-gamma'"></footer-gamma> </div>

<script> //some code that sets doneLoading and shopTheme vars </script>

IS there a way to make Nuxt.js render the components too?

Is there another way to server-side render the whole page before sending it to the user in the Vue.js universe?

If not we will pretty much have to abandon building the idea of building the whole frontend in Vue components and "downgrade" to something like Express/Pug templates + Vue components that load afterwards for the things that are not SEO-critical...